FrontendVueTailwind

[Vue 3] - unplugin-vue-router 사용하기

참고

https://github.com/posva/unplugin-vue-router

vue 에서는 새로운 페이지를 생성할때마다 vue-router 에 직접 등록해줘야 하는 번거로움이 있습니다. 이런 수고스러움을 좀 덜고자 찾아보니 vue 에서도 next 나 nuxt 처럼 파일 기반으로 라우팅을 할 수 있게 지원해주는 모듈을 찾게 됐습니다.

1. unplugin-vue-router 모듈을 설치

npm i -D unplugin-vue-router

2. vite.config.ts 에 다음 내용을 추가해 줍니다.

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueRouter({})],
})

3. tsconfig.json 설정 정보 추가

tsconfig.json
{
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler",
    // ...
    "types": ["unplugin-vue-router/client"],
  }
  // ...
  "include": [
    // ...
    "./typed-router.d.ts"
  ],
}

4. routes/index.ts 파일 생성

index.ts
import { createWebHistory, createRouter } from "vue-router";
import { routes } from "vue-router/auto-routes";

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

export default router;

5. main.ts 파일에 라우트 모듈 추가

main.ts
import {createApp} from 'vue'  
import './style.css'  
import App from './App.vue'  
import router from "./router";  
  
createApp(App)  
  .use(router)  
  .mount('#app')

6. app.vue 파일

app.vue
<script setup lang="ts">  
  
</script>  
  
<template>  
  <router-view/></template>  
  
<style scoped>  
.logo {  
  height: 6em;  
  padding: 1.5em;  
  will-change: filter;  
  transition: filter 300ms;  
}  
.logo:hover {  
  filter: drop-shadow(0 0 2em #646cffaa);  
}  
.logo.vue:hover {  
  filter: drop-shadow(0 0 2em #42b883aa);  
}  
</style>
Share