Estoy tratando de comenzar un nuevo proyecto usando vue js. Creo que tengo todas las dependencias que necesito a través de la terminal. Instalé npm, vue, vue-bootstrap y vue-router. El error es de la línea 7 en router.js, Vue.use(VueRouter).
Aquí está el código para mi 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')Aquí está mi enrutador.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 } ] })Lo siento, tenía la línea import vue en la misma línea que los indicadores de código y se cortó, todavía tengo el error.
El error completo es este:
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:928Con vue 3 para crear una aplicación, debe usar el método Vue.createApp y no crear una nueva instancia de vue.
new Vue({ router, }).$mount('#app')se convierte en:
const app = Vue.createApp({ router, }) app.mount('#app')Recuerda que también cambió la api de render, mientras que en 2 h se inyectó en la función args, ahora tienes que importarla desde vue. P.ej:
import { h } from 'vue' export default { render() { return h('div') } }Más información sobre los documentos: aquí .
Actualizar. Como se solicita en los comentarios, amplío el ejemplo que incluye cómo usar un complemento en vue 3.
Volviendo al ejemplo anterior, si queremos usar un complemento, debemos agregar el método .use ANTES del montaje. P.ej:
const app = Vue.createApp({ router, }) app.use(ThePluginIWantToUse) app.mount('#app')Respuesta de Hiws:
BootstrapVue no es compatible con Vue 3, por lo que tendrá que usar Vue 2 o usar otra biblioteca de componentes
Gracias.