Vue Router setup in Vue 3

Note: an option to add the Vue-router has now been integrated in Vite.

Previously, when creating a Vue project using the Vue CLI, the Vue Router could be installed easily by running vue add router. However, with Vue 3 and Vite, the router is installed manually. This can be done with NPM:

npm install vue-router@4

Once installed, the configuration of the router can be done by creating a dedicated .js file in the src directory of the app. To mimic the structure of Vue 2 projects, the router config file is named index.js, to be created in a folder called router, sub-folder of src. A basic content would look as follows:

import { createRouter, createWebHistory } from "vue-router";

import Home from '@/views/Home.vue'

const routes = [
    { path: '/', component: Home },
]

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

export default router

Here, views are described in their .vue files in the views folder.

The router can then be added to the Vue application by editing the main.js file to look as follows:

// Components
import App from './App.vue'
import router from './router'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'

const app = createApp(App)

registerPlugins(app)

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

With this done, the Vue Router should now be ready to use in the application