title: Vue router with Vue 3 raises 17 warnings and the contents of the app file are not displayed
body: <p>I am trying to build a simple single page application so i created a project selecting (<strong>Default (Vue 3 Preview) ([Vue 3] babel, eslint)</strong>), and i setup the routing manually following vue mastery tutorial <a href="https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/" rel="nofollow noreferrer">https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/</a>
  the problem is 17 warnings are raised in cmd after i run (<strong>npm run serve</strong>)</p>
  <p><strong>output of my cmd: (some of it as it is too large)</strong></p>
  <pre><code> WARNING  Compiled with 17 warnings                                                11:40:21 PM
   warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
  
  &quot;export 'computed' was not found in 'vue'
  
   warning  in ./src/main.js
  
  &quot;export 'createApp' was not found in 'vue'
  
   warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
  
  &quot;export 'defineComponent' was not found in 'vue'
  </code></pre>
  <p><strong>Here is my App.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div id=&quot;nav&quot;&gt;
        &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; |
        &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-view /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
    components: {
  
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #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;
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>Here is my /src/router/index.js</strong></p>
  <pre><code>import { createWebHistory, createRouter } from &quot;vue-router&quot;;
  import Home from &quot;@/views/Home.vue&quot;;
  import About from &quot;@/views/About.vue&quot;;
  
  const routes = [
    {
      path: &quot;/&quot;,
      name: &quot;Home&quot;,
      component: Home,
    },
    {
      path: &quot;/about&quot;,
      name: &quot;About&quot;,
      component: About,
    },
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  
  export default router;
  </code></pre>
  <p><strong>Here is my /src/main.js</strong></p>
  <pre><code>import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router' // &lt;---
  
  createApp(App).use(router).mount('#app')
  </code></pre>
  <p><strong>my package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend-gp&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@fortawesome/fontawesome-free&quot;: &quot;^5.15.3&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.35&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.3&quot;,
      &quot;@fortawesome/vue-fontawesome&quot;: &quot;^2.0.2&quot;,
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;vue&quot;: &quot;^3.1.4&quot;,
      &quot;vue-router&quot;: &quot;^4.0.10&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.14&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.1.4&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^6.2.2&quot;,
      &quot;node-sass&quot;: &quot;^6.0.1&quot;,
      &quot;sass-loader&quot;: &quot;^10.2.0&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;root&quot;: true,
      &quot;env&quot;: {
        &quot;node&quot;: true
      },
      &quot;extends&quot;: [
        &quot;plugin:vue/essential&quot;,
        &quot;eslint:recommended&quot;
      ],
      &quot;parserOptions&quot;: {
        &quot;parser&quot;: &quot;babel-eslint&quot;
      },
      &quot;rules&quot;: {}
    },
    &quot;browserslist&quot;: [
      &quot;&gt; 1%&quot;,
      &quot;last 2 versions&quot;,
      &quot;not dead&quot;
    ]
  }
  
  </code></pre>
  <p>if you need more resources please let me know</p>