Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/posva/unplugin-vue-router
Next Generation file based typed routing for Vue Router
https://github.com/posva/unplugin-vue-router
typescript vite vue vue-router
Last synced: 5 days ago
JSON representation
Next Generation file based typed routing for Vue Router
- Host: GitHub
- URL: https://github.com/posva/unplugin-vue-router
- Owner: posva
- License: mit
- Created: 2022-06-17T18:20:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T13:24:08.000Z (about 1 month ago)
- Last Synced: 2024-11-29T08:48:05.234Z (23 days ago)
- Topics: typescript, vite, vue, vue-router
- Language: TypeScript
- Homepage: https://uvr.esm.is
- Size: 3.56 MB
- Stars: 1,701
- Watchers: 11
- Forks: 82
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - Official experimental file based routing. (Plugins / Vue)
- awesome-vite - v3 - Official experimental file based routing. (Plugins / Vue)
README
# unplugin-vue-router
[](https://www.npmjs.com/package/unplugin-vue-router) [](https://github.com/posva/unplugin-vue-router/actions/workflows/ci.yml) [](https://codecov.io/gh/posva/unplugin-vue-router)
> Automatic file based Routing in Vue with TS support ✨
- [StackBlitz Demo](https://stackblitz.com/github/posva/uvr-demo)
This build-time plugin simplifies your routing setup **and** makes it safer and easier to use thanks to TypeScript. Requires Vue Router >=4.4.0.
> [!WARNING]
> While unplugin-vue-router typed routing and file based routing is fundamentally stable, it contains other experimental APIs that are subject to change (e.g. Data Loaders). Make sure to check the relevant [Documentation](https://uvr.esm.is) for the latest information.
> If you find any issue, design flaw, or have ideas to improve it, please, open open an [issue](https://github.com/posva/unplugin-vue-router/issues/new/choose) or a [Discussion](https://github.com/posva/unplugin-vue-router/discussions).
## Install
```bash
npm i -D unplugin-vue-router
```
Add VueRouter plugin **before** Vue plugin:
Vite
```ts
// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'
export default defineConfig({
plugins: [
VueRouter({
/* options */
}),
// ⚠️ Vue must be placed after VueRouter()
Vue(),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import VueRouter from 'unplugin-vue-router/rollup'
export default {
plugins: [
VueRouter({
/* options */
}),
// ⚠️ Vue must be placed after VueRouter()
Vue(),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-router/webpack')({
/* options */
}),
],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-router/webpack')({
/* options */
}),
],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import VueRouter from 'unplugin-vue-router/esbuild'
build({
plugins: [VueRouter()],
})
```
## Setup
After installing, **you should run your dev server** (usually `npm run dev`) **to generate the first version of the types**. Then you need to add the types to your `tsconfig.json`.
```json
{
"include": [
// ...
"./typed-router.d.ts"
],
// ...
"compilerOptions": {
// ...
"moduleResolution": "Bundler"
// ...
}
}
```
Then, if you have an `env.d.ts` file like the one created by `npm vue create `, add the `unplugin-vue-router/client` types to it:
```ts
// env.d.ts
///
///
```
If you don't have an `env.d.ts` file, you can create one and add the unplugin-vue-router types to it _or_ you can add them to the `types` property in your `tsconfig.json`:
```json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-router/client"]
}
}
```
Finally, import the generated routes from `vue-router/auto-routes` and pass them to the router:
```diff
import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
createRouter({
history: createWebHistory(),
// pass the generated routes written by the plugin 🤖
+ routes,
})
```
Alternatively, **you can also import the `routes` array** and create the router manually or pass it to some plugin. Here is an example with [Vitesse starter](https://github.com/antfu-collective/vitesse/blob/main/src/main.ts):
```diff
import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import App from './App.vue'
import type { UserModule } from './types'
-import generatedRoutes from '~pages'
+import { routes } from 'vue-router/auto-routes'
import '@unocss/reset/tailwind.css'
import './styles/main.css'
import 'uno.css'
-const routes = setupLayouts(generatedRoutes)
// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
App,
{
- routes,
+ routes: setupLayouts(routes),
base: import.meta.env.BASE_URL
},
(ctx) => {
// install all modules under `modules/`
Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
.forEach(i => i.install?.(ctx))
},
)
```
- [📖 Check more in the Documentation](https://uvr.esm.is).
## License
[MIT](http://opensource.org/licenses/MIT)