Soy totalmente nuevo en Laravel + VueJs. Estoy usando laravel 8 y VueJS 2.6.12 con Vue-Router 3.5.2.
Recibo el siguiente error cuando ejecuto el siguiente comando:
*npm run dev* WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 6:30-48 export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default) WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 9:9-19 export 'openBlock' (imported as '_openBlock') was not found in 'vue' (possible exports: default) WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 9:23-35 export 'createBlock' (imported as '_createBlock') was not found in 'vue' (possible exports: default)
No tengo idea de dónde estoy cometiendo un error.
Dashboard.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Dashboard</div> <div class="card-body"> I'm an dashboard component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
aplicación.js
require('./bootstrap'); import Vue from 'vue' import VueRouter from 'vue-router' import Dashboard from './components/Dashboard.vue' Vue.use(VueRouter) let routes = [ { path: '/dashboard', component: Dashboard } ] const router = new VueRouter({ routes: routes }) const app = new Vue({ router }).$mount('#app')
Aquí está mi archivo package.json. Tengo VueJS 2.6.12 con Vue-Router 3.5.2.
{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@popperjs/core": "^2.9.2", "@vue/compiler-sfc": "^3.1.4", "axios": "^0.21", "bootstrap": "^4.6.0", "jquery": "^3.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "popper.js": "^1.16.1", "postcss": "^8.1.14", "resolve-url-loader": "^3.1.2", "sass": "^1.32.11", "sass-loader": "^11.0.1", "vue": "^2.6.12", "vue-loader": "^16.2.0", "vue-template-compiler": "^2.6.12" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", "admin-lte": "^3.1.0", "bootstrap-vue": "^2.21.2", "vue-router": "^3.5.2" } }
¿Alguien puede ayudar donde está el problema? Soy principiante y necesito sugerencias.