https://github.com/Vanilla-IceCream/vite-plugin-vue-routes

File-based routing for Vue applications using Vite.
https://github.com/Vanilla-IceCream/vite-plugin-vue-routes

vite vue vue-router

Last synced: about 2 months ago
JSON representation

File-based routing for Vue applications using Vite.

• Host: GitHub
• URL: https://github.com/Vanilla-IceCream/vite-plugin-vue-routes
• Owner: Vanilla-IceCream
• License: mit
• Created: 2023-05-08T06:42:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-28T07:24:28.000Z (8 months ago)
• Last Synced: 2024-07-01T13:35:14.669Z (3 months ago)
• Topics: vite, vue, vue-router
• Language: TypeScript
• Homepage: https://vitesheet.onrender.com/vite-plugin-vue-routes/
• Size: 353 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v3 - File-based routing, similar to SvelteKit and Next.js App Router. (Plugins / Vue)
• awesome-vite - v3 - File-based routing, similar to SvelteKit and Next.js App Router. (Plugins / Vue)

README

        
# vite-plugin-vue-routes

File-based routing for Vue applications using Vite.

## Installation

Install `vite-plugin-vue-routes` with your favorite package manager:

```sh

$ npm i vite-plugin-vue-routes -D

# or

$ yarn add vite-plugin-vue-routes -D

# or

$ pnpm i vite-plugin-vue-routes -D

# or

$ bun add vite-plugin-vue-routes -D

```

## Usage

### Configure Vite

Configure Vite by creating a `vite.config.ts` file in the root directory of your project, as shown below:

```ts

// vite.config.ts

import { resolve } from 'path';

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import vueRoutes from 'vite-plugin-vue-routes';

export default defineConfig({

  plugins: [

    vue(),

    vueRoutes(), // Default: { routesDir: '/src/routes' }

  ],

  resolve: {

    alias: {

      '~': resolve(__dirname, 'src'),

      '@': resolve(__dirname, 'src'),

    },

  },

});

```

### Create the Vue Application

Create a Vue application by defining `src/App.vue`:

```vue

  

```

```ts

// src/main.ts

import { createApp } from 'vue';

import router from '~/plugins/router';

import App from './App.vue';

const app = createApp(App);

app.use(router);

app.mount('#root');

```

### Create the Router Plugin

Create the router plugin by defining `src/plugins/router.ts`:

```ts

// src/plugins/router.ts

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

import routes from 'virtual:vue-routes';

const router = createRouter({

  history: createWebHistory(),

  routes,

  scrollBehavior(to, from, savedPosition) {

    if (savedPosition) return savedPosition;

    return { top: 0 };

  },

});

router.beforeEach((to, from) => {

  // ...

  return true;

});

export default router;

```

#### Type

```ts

// vite-env.d.ts

/// 

```

## Define Pages

Define a page by creating files in the `src/routes` directory:

```coffee

src/routes/path/to/+page.vue

```

### Page File Naming Convention

The file naming convention for the routes is as follows:

```coffee

src/routes/hello-world/+page.vue -> /hello-world

src/routes/products/+page.vue -> /products

src/routes/products/[id]/+page.vue -> /products/:id

src/routes/posts/[[title]]/+page.vue -> /posts/:title?

src/routes/blog/[...info]/+page.vue -> /blog/:info*

src/routes/(group)/foo/+page.vue -> /foo

src/routes/(group)/bar/+page.vue -> /bar

src/routes/(home)/+page.vue -> /

```

## Define Layouts

Define a layout by creating files in the `src/routes` directory:

```coffee

src/routes/path/to/+layout.vue

```

```vue

  

```

### Layout File Naming Convention

```coffee

src/routes/+layout.vue -> /+

src/routes/(dashboard)/+layout.vue -> /+

src/routes/(marketing)/+layout.vue -> /+

src/routes/users/[username]/+layout.vue -> /users/:username/+

```

## Define Errors

Define an error page by creating files in the `src/routes` directory:

```coffee

src/routes/+error.vue

```

```vue

  
Error


```

### Error File Naming Convention

```coffee

src/routes/+error.vue -> /:slug(.*)*

```

## Documentation

To learn more about `vite-plugin-vue-routes`, check [its documentation](https://vitesheet.onrender.com/vite-plugin-vue-routes/).

## Examples

See [`./examples`](./examples).