A lightweight Vue 3 router. Only 1kb gzipped with all the features you need.
- 🤏 Tiny: 1.02kb gzipped
- ⚡ Fast: Minimal overhead, maximum performance
- 🎯 Simple: Easy setup, intuitive API
- 💪 Complete: Route params, guards, lazy loading, redirects
npm install vue-tiny-router
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { TinyRouterInstall } from 'vue-tiny-router'
createApp(App)
.use(TinyRouterInstall)
.mount('#app')
<!-- App.vue -->
<template>
<TinyRouter :routes="routes" />
</template>
<script>
import { TinyRouter } from 'vue-tiny-router'
import Home from './views/Home.vue'
import Profile from './views/Profile.vue'
export default {
components: { TinyRouter },
data() {
return {
routes: [
{ path: '/', component: Home },
{ path: '/profile/:id', component: Profile }
]
}
}
}
</script>
<template>
<button @click="$router.push('/')">Home</button>
<button @click="$router.push('/profile/123')">Profile</button>
</template>
That's it! 🎉
-
$router.push(path)
- Navigate to a route -
$router.route
- Current route path -
$router.params
- Route parameters object
<TinyRouter
:routes="routes" // Required: Array of route objects
:redirects="redirects" // Optional: Redirect mappings
:memoryMode="false" // Optional: In-memory routing
/>
Access dynamic route segments:
// Route: /user/:id
// URL: /user/123
this.$router.params.id // "123"
Prevent navigation or add animations:
export default {
beforeRouteLeave(next, to) {
// Do something async, then call next()
this.saveData().then(next)
}
}
Reduce initial bundle size:
import { defineAsyncComponent } from 'vue'
const routes = [
{
path: '/heavy',
component: defineAsyncComponent(() => import('./HeavyComponent.vue'))
}
]
const redirects = {
'/old-path': '/new-path',
'/home': '/'
}
import { defaultRoute } from 'vue-tiny-router'
defaultRoute.value = '/dashboard'
Perfect for embedded apps or testing:
<TinyRouter :routes="routes" :memoryMode="true" />
vue-tiny-router
automatically intercepts clicks on <a>
tags. If the link's destination is a route managed by the router, it will prevent a page reload and handle it as an in-app navigation. For all other links (external sites or unhandled paths), it will allow the browser's default behavior. No configuration is needed.
Most common patterns work the same:
vue-router | vue-tiny-router |
---|---|
$router.push() |
$router.push() ✅ |
$route.params |
$router.params ✅ |
beforeRouteLeave |
beforeRouteLeave ✅ |
Route guards | Route guards ✅ |
Lazy loading | Lazy loading ✅ |
Works in all modern browsers that support ES6+ and the History API.
Keep it tiny! When contributing:
- Maintain minimal bundle size
- Ensure all tests pass
- Follow the simple API design
MIT