[Nuxt3] 개발팁1 - page 에 있는 vue 페이지 자동으로 라우팅하는 방법

요즘 Nuxt3 + pinia + typescript + vuetify component를 이용해서 front framework 를 만드는 작업을 하고 있습니다. 
vuejs 2.6 버전으로 만들어진 framework 를 이용해서 개발을 진행하다보니 router 를 항상 이용해서 이해안되는 부분이 많이 있네요.

일반적으로 보통 vue에서는 router 폴더에 index.js 를 선언해서 component를 import를 해서 routues에 선언을 해서 사용을 했습니다. 

현재 Nuxt로 framework를 변경하고 싶은 이유는 위와 같이 import를 하는 것이 귀찮고 실수를 할 수 있는 부분이 있어서 변경할려고 하는 것이겠죠. 

이전 방식으로 하니깐 화면이 페이지 이동이 되지가 않더라구요. 
nuxt3에서 router를 대신해서 자동으로 routing이 되는 방식은 아래와 같습니다. 

https://v3.nuxtjs.org/api/components/nuxt-page/

<NuxtPage> · Nuxt Components

NuxtPage is a wrapper around <RouterView> component from Vue Router.
NuxtPage component accepts same name and route props.

위와 같은 문구가 있더군요. 

사용방법은 root folder에 있는 app.vue 페이지에 아래와 같이 선언하시면 /page 폴더에 있는 vue 파일들이 자동으로 라우팅이 됩니다. 

반응형