0.7.3 • Published 3 years ago

vite-plugin-voie v0.7.3

Weekly downloads
138
License
MIT
Repository
github
Last release
3 years ago

voie 🛣

Voie is a vite plugin which enables file system based routing for Vue 3 applications.

  • File system based routing
  • Code splitting and async components by default

Getting Started

Install Voie:

$ npm install vite-plugin-voie

Note: vue-router@4.0.0 is a peer dependency

Add to your vite.config.js:

import voie from 'vite-plugin-voie';

export default {
  plugins: [voie()],
};

When using Voie, a page is a Vue component exported from a .vue or .js file in the src/pages directory.

The routes configuration will be exported from the /@voie/pages module. Import this module and add it to your Vue Router configuration:

import { createRouter } from 'vue-router';
import routes from '/@voie/pages';

const router = createRouter({
  // ...
  routes,
});

Configuration

Voie supports some configuration options in case your environment doesn't match the default:

  • pagesDir - Relative path to the pages directory (defaults to src/pages)
  • extensions - Array of valid extensions for pages (defaults to ['vue', 'js'])

To use custom configuration, pass your options to Voie when creating the plugin:

// vite.config.js
import voie from 'vite-plugin-voie';

export default {
  plugins: [
    voie({
      pagesDir: 'src/views',
      extensions: ['vue', 'ts'],
    }),
  ],
};

File System Routing

Voie's routing is inspired by NuxtJS, and so you can expect similar features with some small differences.

Index Routes

Voie will automatically map files named index to the root of the directory:

  • src/pages/index.vue -> /
  • src/pages/users/index.vue -> /users

Nested Routes

A nested folder structure will result in nested routes, making use of Vue Router's child routes:

  • src/pages/users/one.vue -> /users/one
  • src/pages/dashboard/settings/profile.vue -> /dashboard/settings/profile

You can effectively create layout pages by naming a page with the same name as the directory that contains its children pages:

This directory structure:

src/pages/
  ├── users/
  │  ├── [id].vue
  │  └── index.vue
  └── users.vue

will result in this routes configuration:

[
  {
    path: '/users',
    component: '/src/pages/users.vue',
    children: [
      {
        path: '',
        component: '/src/pages/users/index.vue',
        name: 'users',
      },
      {
        path: ':id',
        component: '/src/pages/users/[id].vue',
        name: 'users-id',
      },
    ],
  },
];

Dynamic Routes

Dynamic routes are denoted using square brackets. Directories and pages can be dynamic:

  • src/pages/users/[id].vue -> /users/:id (/users/one)
  • src/[user]/settings.vue -> /:user/settings (/one/settings)

Catch-all Routes

Catch-all routes are denoted with square brackets containing an ellipsis:

  • src/pages/[...all].vue -> /* (/non-existent-page)

The text after the ellipsis will be used both to name the route, and as the name of the prop in which the route parameters are passed.

Trivia

voie is the french word for "way" and is pronounced /vwa/.

0.7.2

3 years ago

0.7.3

3 years ago

0.7.1

3 years ago

0.7.0

3 years ago

0.6.0

3 years ago

0.5.0

3 years ago

0.4.1

3 years ago

0.4.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.0

4 years ago