Vue router with Vue 3 raises 17 warnings and the contents of the app file are not displayed

Question

I am trying to build a simple single page application so i created a project selecting (Default (Vue 3 Preview) ([Vue 3] babel, eslint)), and i setup the routing manually following vue mastery tutorial https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/ the problem is 17 warnings are raised in cmd after i run (npm run serve)

output of my cmd: (some of it as it is too large)

 WARNING  Compiled with 17 warnings                                                11:40:21 PM
 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

"export 'computed' was not found in 'vue'

 warning  in ./src/main.js

"export 'createApp' was not found in 'vue'

 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

"export 'defineComponent' was not found in 'vue'

Here is my App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here is my /src/router/index.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

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

export default router;

Here is my /src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---

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

my package.json

{
  "name": "frontend-gp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "core-js": "^3.6.5",
    "vue": "^3.1.4",
    "vue-router": "^4.0.10",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.4",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.2.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

if you need more resources please let me know

@BoussadjraBrahim i did shared my package.json file in the question above please check it out — Marwa Abd El Basit

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2021-07-09T22:16:53

You should uninstall the current vue version and install the new one :

npm uninstall vue -S

then

npm install vue@next -S

Vue router with Vue 3 raises 17 warnings and the contents of the app file are not displayed

1 Answers