title: Router not working when adding vitejs v2 to Vue v3
body: <p>An app that has been using <code>webpack</code> for the dev server should now use <code>vite</code>. Everything seems to be working fine (and fast) with the exception of routes. These are simply ignored and only the content of <code>App.vue</code> is rendered.</p>
  <p>This is <code>package.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;mode&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;vite&quot;
    },
    &quot;dependencies&quot;: {
      &quot;vue&quot;: &quot;^3.0.5&quot;,
      &quot;vue-router&quot;: &quot;^4.0.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@vitejs/plugin-vue&quot;: &quot;^1.1.4&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.5&quot;,
      &quot;vite&quot;: &quot;^2.0.2&quot;,
      &quot;typescript&quot;: &quot;~3.9.3&quot;
    }
  }
  </code></pre>
  <p>The central <code>index.html</code> is:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Vite App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
      &lt;script type=&quot;module&quot; src=&quot;/src/main.ts&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>In <code>src/main.ts</code> the <code>router</code> is loaded:</p>
  <pre class="lang-js prettyprint-override"><code>import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  
  createApp(App).use(router).mount('#app')
  </code></pre>
  <p>That router is defined in <code>src/router/index.ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import { createRouter, createWebHistory } from 'vue-router'
  import SomePage from '@/views/SomePage.vue'
  
  const router = createRouter({
    history: createWebHistory(),
    routes: [{
        path: '/some',
        name: 'Some',
        component: SomePage
    }]
  })
  
  export default router
  </code></pre>
  <p>The (never shown) <code>src/views/SomePage.vue</code> is:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;section&quot;&gt;
      Some content on some page.
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>And this is the (always shown) <code>App.vue</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot; /&gt;
    &lt;HelloWorld msg=&quot;Hello Vue 3 + Vite&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  import HelloWorld from './components/HelloWorld.vue'
  &lt;/script&gt;
  </code></pre>
  <p>With this <code>src/components/HelloWorld.vue</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;h1&gt;{{ msg }}&lt;/h1&gt;
    &lt;p&gt;
      Fancy text.
    &lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  import { defineProps } from 'vue'
  
  defineProps({
    msg: String
  })
  &lt;/script&gt;
  </code></pre>
  <p>I would expect http://localhost:3000/some to show the content of <code>SomePage.vue</code>, but only the content of <code>App.vue</code> is rendered, regardless of the route used.</p>
  <p>Pointers to what I'm missing here and why the fine route is ignored are appreciated.</p>