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: 2 months 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 (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-15T03:15:49.000Z (2 months ago)
- Last Synced: 2024-04-17T04:34:28.962Z (2 months ago)
- Topics: typescript, vite, vue, vue-router
- Language: TypeScript
- Homepage: https://uvr.esm.is
- Size: 2.74 MB
- Stars: 1,252
- Watchers: 9
- Forks: 55
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-vite - v3 - Official experimental file based routing. (Plugins / Vue)
- awesome-stars-Sunny-117 - posva/unplugin-vue-router - Next Generation file based typed routing for Vue Router (TypeScript)
- awesome-stars - posva/unplugin-vue-router - Next Generation file based typed routing for Vue Router (TypeScript)
- trackawesomelist - unplugin-vue-router (⭐1.3k) - Next Generation file based typed routing for Vue Router. (Recently Updated / [May 14, 2024](/content/2024/05/14/README.md))
README
# unplugin-vue-router
[](https://www.npmjs.com/package/unplugin-vue-router) [](https://github.com/posva/unplugin-vue-router/actions/workflows/ci.yml)
> Automatic file based Routing in Vue with TS support ✨
This build-time plugin simplifies your routing setup **and** makes it safer and easier to use thanks to TypeScript. Requires Vue Router at least 4.1.0.
⚠️ This package is still experimental. If you found any issue, design flaw, or have ideas to improve it, please, 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",
"types": [
// ...
"unplugin-vue-router/client"
]
}
}
```
Finally, you should replace your imports from `vue-router` to `vue-router/auto`:
```diff
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router/auto'
createRouter({
history: createWebHistory(),
// You don't need to pass the routes anymore,
// the plugin writes it for you 🤖
})
```
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/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)