If you see Uncaught TypeError: window.Vue.use is not a function when using Vue Router, you’re probably mixing Vue 2 syntax with Vue 3.
In Vue, Vue.use() is no longer used to install plugins; instead, you create an app instance with createApp and call .use() on that instance. Here’s how to fix this common mistake.
What Causes This Error
In Vue 2, you’d add Vue Router like this:
Vue.use(VueRouter)
But in Vue 3, Vue is not a global constructor anymore. Instead, you should import createApp and install plugins on the app instance.
Correct Way to Use Vue Router in Vue 3
Here’s how to properly set up Vue Router with Vue 3:
// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
// Define your routes
const routes = [
{ path: '/', component: () => import('./components/Home.vue') },
// add more routes here
]
// Create router instance
const router = createRouter({
history: createWebHistory(),
routes
})
// Create app instance
const app = createApp(App)
// Install router
app.use(router)
// Mount the app
app.mount('#app')
Also Read: The Top Websites Built with Vue JS
Key Takeaway
The error Uncaught TypeError: window.Vue.use is not a function means you are attempting to use the Vue 2 plugin installation method (Vue.use()) in a Vue 3 environment. For Vue 3, always use app.use(plugin) on your application instance after creating it with createApp().
Related Resources
