Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (12 months ago)
- Last Synced: 2024-10-01T23:47:51.941Z (4 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-worldsrc/routes/products/+page.vue -> /products
src/routes/products/[id]/+page.vue -> /products/:idsrc/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 -> /barsrc/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).