{"id":15311693,"url":"https://github.com/brattonross/vite-plugin-voie","last_synced_at":"2025-10-08T21:30:29.289Z","repository":{"id":38890825,"uuid":"286139156","full_name":"brattonross/vite-plugin-voie","owner":"brattonross","description":"File system based routing plugin for Vite","archived":true,"fork":false,"pushed_at":"2022-02-01T01:55:31.000Z","size":660,"stargazers_count":229,"open_issues_count":4,"forks_count":9,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-09-16T17:48:06.421Z","etag":null,"topics":["routing","vite","vite-plugin","vue3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-voie","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brattonross.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-09T00:14:38.000Z","updated_at":"2024-09-14T22:10:14.000Z","dependencies_parsed_at":"2022-09-22T01:11:46.314Z","dependency_job_id":null,"html_url":"https://github.com/brattonross/vite-plugin-voie","commit_stats":null,"previous_names":["vamplate/vite-plugin-voie"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brattonross%2Fvite-plugin-voie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brattonross%2Fvite-plugin-voie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brattonross%2Fvite-plugin-voie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brattonross%2Fvite-plugin-voie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brattonross","download_url":"https://codeload.github.com/brattonross/vite-plugin-voie/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877266,"owners_count":16554910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["routing","vite","vite-plugin","vue3"],"created_at":"2024-10-01T08:34:17.401Z","updated_at":"2025-10-08T21:30:28.832Z","avatar_url":"https://github.com/brattonross.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Plugins"],"sub_categories":["Routing"],"readme":"# voie 🛣\n\n![npm version](https://img.shields.io/npm/v/vite-plugin-voie)\n\n\u003e File system based routing for Vue 3 applications using [Vite](https://github.com/vitejs/vite)\n\n**Note:** This project is no longer actively maintained. If you are looking for a file-based routing system for Vite, other kind members of the community have built a solution over at [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages)\n\nVoie is a Vite plugin that brings file system based routing to your Vue 3 applications.\n\n## Getting Started\n\nInstall Voie:\n\n\u003e Vite 2 is supported from `^0.7.x`, Vite 1 support is discontinued\n\n```bash\n$ npm install -D vite-plugin-voie\n```\n\n\u003e Note: `vue-router@^4` is a peer dependency\n\nAdd to your `vite.config.js`:\n\n```js\nimport vue from '@vitejs/plugin-vue';\nimport voie from 'vite-plugin-voie';\n\nexport default {\n  plugins: [vue(), voie()],\n};\n```\n\n## Overview\n\nBy default a page is a Vue component exported from a `.vue` or `.js` file in the `src/pages` directory.\n\nYou can access the generated routes by importing the `voie-pages` module in your application.\n\n```js\nimport { createRouter } from 'vue-router';\nimport routes from 'voie-pages';\n\nconst router = createRouter({\n  // ...\n  routes,\n});\n```\n\n\u003e Note: TypeScript users can install type definitions for the generated routes via the `voie-pages` package:\n\n```bash\n$ npm install -D voie-pages\n```\n\n## Configuration\n\n```ts\ninterface UserOptions {\n  pagesDir?: string;\n  extensions?: string[];\n  importMode?: ImportMode | ImportModeResolveFn;\n  extendRoute?: (route: Route, parent: Route | undefined) =\u003e Route | void;\n}\n```\n\n### pagesDir\n\nRelative path to the pages directory. Supports globs.\n\n**Default:** `'src/pages'`\n\n### extensions\n\nArray of valid file extensions for pages.\n\n**Default:** `['vue', 'js']`\n\n### importMode\n\nImport mode can be set to either `async`, `sync`, or a function which returns one of those values.\n\n**Default:** `'async'`\n\nTo get more fine-grained control over which routes are loaded sync/async, you can use a function to resolve the value based on the route path. For example:\n\n```js\n// vite.config.js\nexport default {\n  // ...\n  plugins: [\n    voie({\n      importMode(path) {\n        // Load index synchronously, all other pages are async.\n        return path.includes('index') ? 'sync' : 'async';\n      },\n    }),\n  ],\n};\n```\n\n### extendRoute\n\nA function that takes a route and optionally returns a modified route. This is useful for augmenting your routes with extra data (e.g. route metadata).\n\n```js\n// vite.config.js\nexport default {\n  // ...\n  plugins: [\n    voie({\n      extendRoute(route, parent) {\n        if (route.path === '/') {\n          // Index is unauthenticated.\n          return route;\n        }\n\n        // Augment the route with meta that indicates that the route requires authentication.\n        return {\n          ...route,\n          meta: { auth: true },\n        };\n      },\n    }),\n  ],\n};\n```\n\n### Using configuration\n\nTo use custom configuration, pass your options to Voie when instantiating the plugin:\n\n```js\n// vite.config.js\nimport voie from 'vite-plugin-voie';\n\nexport default {\n  plugins: [\n    voie({\n      pagesDir: 'src/views',\n      extensions: ['vue', 'ts'],\n    }),\n  ],\n};\n```\n\n## File System Routing\n\nVoie is inspired by the routing from [NuxtJS](https://nuxtjs.org/guides/features/file-system-routing) 💚\n\nVoie automatically generates an array of routes for you to plug-in to your instance of Vue Router. These routes are determined by the structure of the files in your pages directory. Simply create `.vue` files in your pages directory and routes will automatically be created for you, no additional configuration required!\n\nFor more advanced use cases, you can tailor Voie to fit the needs of your app through [configuration](https://github.com/brattonross/vite-plugin-voie#configuration).\n\n- [Basic Routing](https://github.com/brattonross/vite-plugin-voie#basic-routing)\n- [Index Routes](https://github.com/brattonross/vite-plugin-voie#index-routes)\n- [Dynamic Routes](https://github.com/brattonross/vite-plugin-voie#dynamic-routes)\n- [Nested Routes](https://github.com/brattonross/vite-plugin-voie#nested-routes)\n- [Catch-all Routes](https://github.com/brattonross/vite-plugin-voie#catch-all-routes)\n\n### Basic Routing\n\nVoie will automatically map files from your pages directory to a route with the same name:\n\n- `src/pages/users.vue` -\u003e `/users`\n- `src/pages/users/profile.vue` -\u003e `/users/profile`\n- `src/pages/settings.vue` -\u003e `/settings`\n\n### Index Routes\n\nFiles with the name `index` are treated as the index page of a route:\n\n- `src/pages/index.vue` -\u003e `/`\n- `src/pages/users/index.vue` -\u003e `/users`\n\n### Dynamic Routes\n\nDynamic routes are denoted using square brackets. Both directories and pages can be dynamic:\n\n- `src/pages/users/[id].vue` -\u003e `/users/:id` (`/users/one`)\n- `src/[user]/settings.vue` -\u003e `/:user/settings` (`/one/settings`)\n\nAny dynamic parameters will be passed to the page as props. For example, given the file `src/pages/users/[id].vue`, the route `/users/abc` will be passed the following props:\n\n```json\n{ \"id\": \"abc\" }\n```\n\n### Nested Routes\n\nWe can make use of Vue Routers child routes to create nested layouts. The parent component can be defined by giving it the same name as the directory that contains your child routes.\n\nFor example, this directory structure:\n\n```\nsrc/pages/\n  ├── users/\n  │  ├── [id].vue\n  │  └── index.vue\n  └── users.vue\n```\n\nwill result in this routes configuration:\n\n```js\n[\n  {\n    path: '/users',\n    component: '/src/pages/users.vue',\n    children: [\n      {\n        path: '',\n        component: '/src/pages/users/index.vue',\n        name: 'users',\n      },\n      {\n        path: ':id',\n        component: '/src/pages/users/[id].vue',\n        name: 'users-id',\n      },\n    ],\n  },\n];\n```\n\n### Catch-all Routes\n\nCatch-all routes are denoted with square brackets containing an ellipsis:\n\n- `src/pages/[...all].vue` -\u003e `/*` (`/non-existent-page`)\n\nThe 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.\n\n## Thanks\n\nMany thanks go to [@antfu](https://github.com/antfu) for their support of this project.\n\n## Trivia\n\n[voie](https://en.wiktionary.org/wiki/voie) is the french word for \"way\" and is pronounced `/vwa/`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrattonross%2Fvite-plugin-voie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrattonross%2Fvite-plugin-voie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrattonross%2Fvite-plugin-voie/lists"}