Vue error 해결법: Cannot read property 'use' of undefined

vue3 를 이용하여 동작시킬 때 아래와 같은 에러가 나는 경우가 있다.

Cannot read property 'use' of undefined

 

위와 같은 에러는 보통 vue2 버전의 문법을 vue3 버전에 적용시키려 할 때 나타난다.

따라서 보통 검색을 하면 가장 간단한 방법은 vue 버전을 vue2 로 변형하면 간단하게 해결된다.

하지만 Vue 3 를 그대로 사용하고 싶을 때에는 아래와 같은 방법으로 해결하면된다.

현재 발생한 에러의 이유는 현재 버젼의 vue-router 와 vue3 가 호환되지 않았기 때문이다.

따라서 먼저 vue-router를 vue3에 맞게 재설치한다. 

$ npm i vue-router@next

 

main.js 파일은 아래와 같이 바꿔준다.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

 

그런 뒤 router 의 index.js 파일을 다음과 같이 변형한다. (경로는 기존과 같게)

router/index.js

import { createWebHistory, createRouter } from 'vue-router'
import Login from '@/components/Login'

const routes = [
    {
        path: '/',
        name: 'Login',
        component: Login
    }
]

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

export default router

 

해결 완료!