Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lara28580's avatar

Cant not import Vue + VueRouter correctly

I am trying to import Vue and VueRouter correctly, but I always get the following warnings.

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

let app = new Vue({
    el: '#app',

    router: new VueRouter(routes)
});

Warnings in console

WARNING in ./resources/js/app.js 4:0-9
export 'createApp' (imported as 'createApp') 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 ./nodWARNING in ./resources/js/app.js 4:8-17
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/app.js 7:14-23
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 ./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)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1889: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 1893:25-31
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)

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

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

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2061:18-26
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2061:48-53
export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2062:30-38
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2086:21-29
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2088:26-34
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2093:26-31
export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2093:69-74
export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2101:25-43
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 2112:12-23
export 'watchEffect' (imported as 'watchEffect') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2121:14-22
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

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

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2146:21-29
export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2147:28-34
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2148:24-32
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2161:18-19
export 'h' (imported as 'h') was not found in 'vue' (possible exports: default)

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

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2252:30-36
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2253:31-39
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2254:22-28
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2255:32-40
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

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

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

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

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2259:24-27
export 'ref' (imported as 'ref') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2262:8-13
export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2317:30-31
export 'h' (imported as 'h') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2362:21-39
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 2463:8-13
export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 2819:25-35
export 'shallowRef' (imported as 'shallowRef') was not found in 'vue' (possible exports: default)

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

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 3368:27-32
export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 3388:37-45
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 3391:42-50
export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default)

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

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

Maybe someone can help.

0 likes
6 replies
tykus's avatar

What are your Vue and Vue Router versions - they are probably incompatible.

1 like
lara28580's avatar

Thanks for your reply. Here is my package.json

{
    "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.14"
    }
}
lara28580's avatar

@tykus Thanks, but if I try to install npm install vue-router I get

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   dev vue@"^2.6.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from [email protected]
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"*" from the root project

Please or to participate in this conversation.