export 'default' (imported as Vue ) was not found in 'vue'

Question

I am new with this vue and I got this error when I try to run (npm run serve):

***WARNING Compiled with 4 warnings
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/router/index.js
"export 'default' (imported as 'Vue') was not found in 'vue'

App running at:

Local: http://localhost:8080/
Network: http://10.2.220.30:8080/***

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [{
        path: "/home",
        name: "home",
        component: Home,
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/",
        name: "login",
        component: () =>
            import ("../views/login.vue")
    },
    {
        path: "/register",
        name: "register",
        component: () =>
            import ("../views/register.vue")
    }
];
const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});
router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem("jwt") == null) {
            next({
                path: "/"
            });
        } else {
            next();
        }
    } else {
        next();
    }
});
export default router;

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.css";

const base = axios.create({
    baseURL: "http://localhost:4000"
});

Vue.prototype.$http = base;
Vue.config.productionTip = false;
new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

Did you install Vue 2 or Vue 3? Vue recently released 3.0.0, and it has a different syntax for initializing Vue. Which is why you might have issues with the syntax above. — Hiws
– Hiws, Commented Sep 24, 2020 at 6:32
Actually when I create a vue project, I selected the vue3 babel.... — cypher
– cypher, Commented Sep 24, 2020 at 6:53
At first it works fine when I run npm run serve..but as I go through in this project I got this error, that's why I install vue using npm but then again I got the same error. — cypher
– cypher, Commented Sep 24, 2020 at 7:02

user1338062 · Accepted Answer · 2021-04-05 05:57:35Z

15

Vue v3:

import * as Vue from 'vue';
import * as VueRouter from 'vue-router';

const routes = [
  // TODO
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

Vue.createApp(App).use(router).mount('#app');

https://next.router.vuejs.org/guide/migration/index.html

answered Apr 5, 2021 at 5:57

user1338062

13k4 gold badges77 silver badges67 bronze badges

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

Comments

Simon Ray · Accepted Answer · 2020-09-29 14:28:46Z

3

When you upgrade to vue v3 should upgrade vue-router to 'vue-router/next' Offical website and use this code instead to import the function

import { createRouter, createWebHistory } from 'vue-router'

and remove

Vue.use(VueRouter);

answered Sep 29, 2020 at 14:28

Simon Ray

491 bronze badge

Comments

GMKHussain · Accepted Answer · 2021-04-26 16:15:00Z

2

Make sure all dependencies installed.

eg. install the router

npm install vue-router@next --save

answered Apr 26, 2021 at 16:15

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Comments

shaedrich · Accepted Answer · 2023-02-09 08:22:30Z

1

Type these commands in the project terminal

npm uninstall vue-router --legacy-peer-deps
npm install --save vue-router@3

It worked in my case the issue was due to vue-router version

https://blog.csdn.net/cxl1191628698/article/details/127352186

edited Feb 9, 2023 at 8:22

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

answered Feb 6, 2023 at 21:21

Desto

112 bronze badges

Collectives™ on Stack Overflow

export 'default' (imported as Vue ) was not found in 'vue'

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related