https://github.com/itsjustlogan/create-vue-router

Add vue router to a vite project or any other existing vue 3 project.
https://github.com/itsjustlogan/create-vue-router

vite vue vue-router

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/itsjustlogan/create-vue-router
• Owner: itsjustlogan
• License: mit
• Created: 2022-04-12T01:43:50.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-13T20:58:33.000Z (about 3 years ago)
• Last Synced: 2024-04-23T23:00:34.890Z (about 1 year ago)
• Topics: vite, vue, vue-router
• Language: TypeScript
• Homepage:
• Size: 137 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# **Create Vue Router**

[![npm](https://img.shields.io/badge/build-stable-sucess?&style=flat)](https://github.com/itsjustlogan/create-vue-router)

[![npm](https://img.shields.io/npm/v/create-vue-router?color=green)](https://www.npmjs.com/package/create-vue-router)

[![npm](https://img.shields.io/badge/licence-MIT-blue?&style=flat)](https://github.com/itsjustlogan/create-vue-router/blob/main/LICENSE)

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**

```shell

npx create-vue-router

```

## **Next Steps**

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

```js

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:

```html

```

to your App.vue.

## **What this package generates:**

```js

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](https://router.vuejs.org/guide/advanced/lazy-loading.html)