Laravel9 with Vue2

Question

I installed Laravel and Vuejs with commands

laravel new blog

composer require laravel/ui

php artisan ui vue

npm install vue-router

npm install

app.js


window.Vue = require('vue').default;
import router from "./router/router";
const app = new Vue({
    el: '#app',
    router
});

router/router.js

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../components/ExampleComponent.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

It gives an error when I execute this command ‍npm run watch

export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

WARNING in ./resources/js/router/router.js 11:17-26
export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./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/ExampleComponent.vue?vue&type=template&id=299e239e) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)

WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./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/ExampleComponent.vue?vue&type=template&id=299e239e) 10:9-19
export 'openBlock' (imported as '_openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./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/ExampleComponent.vue?vue&type=template&id=299e239e) 10:23-42
export 'createElementBlock' (imported as '_createElementBlock') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1852:4-15
export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1853:4-17
export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1854:4-15
export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1867:52-70
export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1871:25-31
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)```

Can you share your package.json?

quadmachine
– quadmachine

2022-03-01 08:32:23 +00:00
Commented Mar 1, 2022 at 8:32 — quadmachine
– quadmachine, Commented Mar 1, 2022 at 8:32
yes @quadmachine

Parsa Haghighi
– Parsa Haghighi

2022-03-01 08:47:18 +00:00
Commented Mar 1, 2022 at 8:47 — Parsa Haghighi
– Parsa Haghighi, Commented Mar 1, 2022 at 8:47

Ramanath · Accepted Answer · 2022-03-01 10:22:53Z

2

You have installed incompatible dependencies for vue2.

Try changing vue-router and vuex versions.

Try installing the following versions -

"vuex": "^3.6.2",
"vue-router": "^3.5.1",

answered Mar 1, 2022 at 10:22

Ramanath

5302 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Parsa Haghighi · Accepted Answer · 2022-03-01 08:46:38Z

@quadmachine

package.josn

    "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.10.2",
        "axios": "^0.25",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "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": "^15.9.7",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue-router": "^4.0.13",
        "vuex": "^4.0.2"
    }
}

Collectives™ on Stack Overflow

Laravel9 with Vue2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related