Animated page stacks, modal dialogs, HUD controls — no URL routing. Just push('profile') and watch it animate.
bun add vue-micro-routernpm install vue-micro-routeryarn add vue-micro-routerpnpm add vue-micro-router<!-- App.vue -->
<script setup>
import { MicroRouterView } from 'vue-micro-router';
import 'vue-micro-router/styles';
import { appPlugin } from './app-plugin';
const config = {
defaultPath: 'home',
history: { enabled: true, maxEntries: 50 },
gesture: { enabled: true },
};
</script>
<template>
<MicroRouterView :config :plugins="[appPlugin]" />
</template>| vue-router | vue-micro-router | |
|---|---|---|
| Navigation model | URL-based (/path/:param) | Segment stack (home → home/menu → home/menu/settings) |
| Page transitions | Manual (TransitionGroup) | Built-in slide/fade + per-route customization |
| Multiple visible pages | No (one route = one view) | Yes — stacked pages render simultaneously |
| Modal dialogs | DIY | First-class with stacking, backdrop, focus trap |
| GUI overlays / HUD | DIY | First-class controls with auto-show/hide |
| Gesture navigation | None | Swipe-back from left edge |
| State persistence | None | serialize() / restore() |
| Use case | Websites, SPAs | Games, mobile-style apps, kiosks, wizards |