I'm trying to start a new project using vue js. I think I have all the dependencies I need through the terminal. I installed npm, vue, vue-bootstrap and vue-router. Error is from line 7 on router.js, Vue.use(VueRouter).
Here's the code for 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')
Here's 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 had the import vue line on the same line as the code indicators and it got cut off, I have the error still.
The full 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
With vue 3 to create an app you must use the Vue.createApp method, and not create a new vue instance.
new Vue({
router,
}).$mount('#app')
becomes:
const app = Vue.createApp({
router,
})
app.mount('#app')
Remember that also the render api changed, while in 2 h was injected in the function args, now you have to import it from vue. Eg:
import { h } from 'vue'
export default {
render() {
return h('div')
}
}
More infos on the docs: here.
Update. As requested in comments, I expand the example including how to use a plugin on vue 3.
Going back to the example up here, if we want to use a plugin we need to add the .use method BEFORE the mounting. Eg:
const app = Vue.createApp({
router,
})
app.use(ThePluginIWantToUse)
app.mount('#app')
Answer from Hiws:
BootstrapVue doesn't support Vue 3, so you'll have to either use Vue 2 or use another component library
Thanks.