Nuxt 사용

프로젝트를 진행 시 vue로 시작했으나 메타 이미지와 SEO 최적화를 위해 nuxt 프레임워크를 도입해야했다. vue로 완성했지만 nuxt로 변환해주면서 생긴 문제들이 있었다.

Vue vs Nuxt 디렉토리 구조 차이

가장 큰 차이는 router 파일을 따로 안써도 된다는 점!!

Vue router

vue에서는 라우터 연결을 하려면 router 폴더에 js 파일을 만들어서 직접 연결을 해줘야했다.

Nuxt router

하지만 nuxt에서는 pages 폴더에 파일을 만들면 자동으로 라우터 연결을 시켜준다. .nuxt 폴더에 숨겨진 router.js에 자동으로 만들어준다.
pages에 questions.vue, tutorial.vue, index.vue 파일이 있는 것이다.

이 때 발생한 문제점

vue에서는 router.js 파일에 props: true 를 선언해두면 페이지가 넘어갈 때 params 값을 넘겨줄 수 있다.

this.$router.push({ name: "Loading", params: { firstTest: true } } );

// Loading.vue
props: ["firstTest"]

Loading이라는 이름을 가진 페이지로 넘어가면서 변수 firstTest의 값 true가 전달되어 사용 가능하다.

nuxt에서는 router.js가 자동 생성되기 때문에 vue처럼 params 값을 넘겨줄 수 없었다.
그래서 찾은 방법은 쿼리로 넘겨주기!

this.$router.push({path: "Loading?firstTest=true"});

// Loading.vue
data() {
    return {
      firstTest: null,
    }
},
created() {
    if (this.$route.query.firstTest) {
      this.firstTest = this.$route.query.firstTest;
    }
}

쿼리를 이용하면 페이지를 따로 만들지 않아도 Loading과 동일한 페이지지만 데이터를 넘겨받을 수 있다. 생각해보면 간단한데 이걸 이틀이나 서치하고 생각했다.