[Vue.js] Unplugin-Vue-Router

포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모르는 플러그인들이 이미 적용되어 있었다. 이제 Vue를 배운지 이틀 정도인데 모르는 것들이 적용되어 있어 당황스러웠고 하나씩 찾아보았다. 그 중 첫 번째로 눈에 띈 것이 unplugin-vue-router 였고 공식문서 기반으로 정리해보도록 한다.

Basic Vue routing

Vue에서는 공식적인 라우터 기능을 Vue-Router에서 제공한다. 여러 페이지 컴포넌트들을 만들어놓고 이것들을 라우터에 등록해야 한다. 기본적인 라우터 코드는 다음과 같다.

import { createRouter, createWebHistory } from 'vue-router'

export const router = createRouter({
  history: createWebHistory(),
  routes: [ 
    { 
      path: '/', 
      component: () => import('src/pages/Home.vue'), 
    }, 
    { 
      path: '/users/:id', 
      component: () => import('src/pages/User.vue'), 
    } 
    { 
      path: '/about', 
      component: () => import('src/pages/About.vue'), 
    }, 
  ]
})

라우팅이 별로 없을 때는 이런식으로 관리해도 괜찮지만 많아질수록 라우터 코드도 많아지고 비대해진다. 이를 해결해주는 플러그인이 unplugin-vue-router 이다.

⚠️이 플러그인은 Vue-Router 4.4 버전 이상에서 사용 가능하다.

unplugin-vue-router

이 플러그인을 사용하면 파일 기반 라우팅을 가능하게 해준다. Next.js에서 제공하는 기능과 비슷하다고 느꼈다. 이 플러그인을 사용하면 위 코드가 다음과 같이 줄어든다.

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHistory(),
  routes, 
})

 

그리고 파일명을 다음과 같이 변경하면 된다.

• src/pages/Home.vue -> src/pages/index.vue
• src/pages/User.vue -> srsc/pages/users/[id].vue
• src/pages/About.vue -> src/pages/about.vue

 

이러한 설정을 적용하려면 만들어진 router를 createApp().use(router)로 등록해주면 된다.

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

createApp(App)
  .use(router)
  .mount('#app')

만약 빌드 타임에 타입스크립트의 타입 지원을 받고 싶다면 setupLayouts 에 인수로 넣어주면 된다.

import { createApp } from 'vue'
import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts(routes), // setupLayouts 적용
})

createApp(App)
  .use(router)
  .mount('#app')

 

자세한 사항은 공식문서에서 찾아보길 바란다.

https://uvr.esm.is/

Unplugin Vue Router