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