Create Vue Router

Add vue router to a vite project or any other existing vue 3 project.

What this does

• Install Vue Router
• Create a router folder and a views folder in the src directory.
• Generate an index file with all the necessary boilerplate in the router folder, so you can modify and add routes to your liking.

Installation

npm

npx create-vue-router

Next Steps

You will still need to modify your main.js file in the following ways:

import { createApp } from 'vue'
// import router like shown below
import router from './router'
import App from './App.vue'

// Add .use(router) as shown below.
createApp(App).use(router).mount('#app')

You will also need to add:

<router-view></router-view>

to your App.vue.

What this package generates:

import { createWebHistory, createRouter } from 'vue-router'

const routes = [
  // {
  // path: '/',
  // name: 'Home',
  // component: () => import('../views/Home.vue'),
  // },
  // {
  // path: '/about',
  // name: 'About',
  // component: () => import ('../views/About.vue'),
  // },
]

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

export default router

All routes use dynamic imports as per the vue router docs