A tab manager for Vue 3 and Vue Router. Every tab keeps its own page instance, cache and navigation stack — pages in different tabs never interfere.
每个标签 = 独立页面实例 + 缓存 + 导航栈
pnpm add vue-stack-tabsnpm install vue-stack-tabsyarn add vue-stack-tabs// main.ts
import { createApp } from 'vue'
import VueStackTabs from 'vue-stack-tabs'
import 'vue-stack-tabs/dist/style.css'
const app = createApp(App)
app.use(router)
app.use(VueStackTabs)
app.mount('#app')Then put <VueStackTabs iframe-path="/iframe" /> in the parent route that should host the tabs, and let the router do the rest. See Getting Started.
| one iframe per tab | vue-stack-tabs | |
|---|---|---|
| Isolation | browser-level, the strongest | Vue scope level — enough, and yours to control |
| Runtime cost | one app runtime per iframe | one shared runtime, pages cached per tab |
| Communication | postMessage serialization | reuse components, stores and types directly |
| Routing | separate URL and history | synced with Vue Router, stack-based forward / backward |
| Styling | isolated by the browser | you decide the boundary |
When you actually need document-level isolation — embedding a third-party site, for example — the iframe tab is still there.
useTabActions, useTabRouter, useTabLoading