Router not working when adding vitejs v2 to Vue v3

Question

An app that has been using webpack for the dev server should now use vite. Everything seems to be working fine (and fast) with the exception of routes. These are simply ignored and only the content of App.vue is rendered.

This is package.json:

{
  "name": "mode",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "vue": "^3.0.5",
    "vue-router": "^4.0.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.4",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.0.2",
    "typescript": "~3.9.3"
  }
}

The central index.html is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

In src/main.ts the router is loaded:

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

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

That router is defined in src/router/index.ts:

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

The (never shown) src/views/SomePage.vue is:

<template>
  <div class="section">
    Some content on some page.
  </div>
</template>

And this is the (always shown) App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

With this src/components/HelloWorld.vue:

<template>
  <h1>{{ msg }}</h1>
  <p>
    Fancy text.
  </p>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  msg: String
})
</script>

I would expect http://localhost:3000/some to show the content of SomePage.vue, but only the content of App.vue is rendered, regardless of the route used.

Pointers to what I'm missing here and why the fine route is ignored are appreciated.

Eduardo Sousa · Accepted Answer · 2021-02-24 17:20:41Z

2

You need to add a router-view to go to the page routed.

If you want SomePage to be part of App.vue just do so by

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

answered Feb 24, 2021 at 17:20

Eduardo Sousa

1,0851 gold badge12 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Router not working when adding vitejs v2 to Vue v3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related