Uncaught TypeError: Cannot read property of undefined (read 'using')

Question

I'm trying to start a new project using vue js. I think I have all the dependencies I need via the terminal. I installed npm, vue, vue-bootstrap and vue-router. The error comes from router.js, line 7 on Vue.use(VueRouter).

This is the code of my main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router.js"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

This is my router.js

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "@/pages/Home.vue"
import About from "@/pages/About.vue"
import Contact from "@/pages/Contact.vue"

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  
  ]
})

Sorry, I put the import vue line on the same line as the code indicator, but it got cut off, but the error remains.

The complete error is this:

router.js?41cb:7 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
    at eval (router.js?41cb:7)
    at Module../src/router.js (app.js:1261)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1141)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1274)
    at __webpack_require__ (app.js:849)
eval    @   router.js?41cb:7
./src/router.js @   app.js:1261
__webpack_require__ @   app.js:849
fn  @   app.js:151
eval    @   main.js:12
./src/main.js   @   app.js:1141
__webpack_require__ @   app.js:849
fn  @   app.js:151
1   @   app.js:1274
__webpack_require__ @   app.js:849
checkDeferredModules    @   app.js:46
(anonymous) @   app.js:925
(anonymous) @   app.js:928

Answer 1

To create an application using vue 3, you must use the Vue.createApp method instead of creating a new vue instance.

new Vue({
  router,
}).$mount('#app')

become:

const app = Vue.createApp({
      router,
})

app.mount('#app')

Keep in mind that the rendering api has also changed, and in 2 hours the args were injected into the function, now you have to import it from vue. For example:

import { h } from 'vue'
export default {
  render() {
    return h('div')
  }
}

More information about the documentation: here.

renew. As requested in the comments I've extended the example to include how to use the plugin on vue 3.

Back to the example here, if we want to use the plugin, we need to add the .use method before installing it. For example:

const app = Vue.createApp({
      router,
})
app.use(ThePluginIWantToUse)

app.mount('#app')

Answer 2

Hiws’ answer:

Thanks.