\n\n\n\n```\n\n### Real-time Updates\n\n```vue\n\n```\n\n## π Troubleshooting\n\n### Common Issues\n\n**Tabs not updating titles**\n- Ensure you're using `ref()` or `computed()` for reactive properties\n- Check that properties are properly exposed in `\n```\n\n### Custom Transitions\n\nCreate your own transitions by defining CSS classes:\n\n```css\n/* Your custom transition */\n.my-custom-enter-active,\n.my-custom-leave-active {\n transition: all 0.5s ease;\n}\n\n.my-custom-enter-from {\n opacity: 0;\n transform: translateX(100px);\n}\n\n.my-custom-leave-to {\n opacity: 0;\n transform: translateX(-100px);\n}\n```\n\n```vue\n\n```\n\n### Transition Tips\n\n- **Performance**: Use `mode: 'out-in'` for smooth transitions without layout shifts\n- **Duration**: Built-in transitions are optimized at 0.5-0.8 seconds\n- **Accessibility**: Consider users with motion sensitivity - provide options to disable\n- **Context**: Match transition style to your app's design language\n\n## Changing Tab Titles Dynamically\n\nVue3 Router Tab automatically watches for reactive properties in your page components and updates the corresponding tab information in real-time.\n\n### Quick Start\n\nSimply expose reactive properties from your component:\n\n```vue\n\n
\n
{{ routeTabTitle }}
\n \n
\n\n\n\n```\n\n### Watched Properties\n\nThe following reactive properties are automatically monitored:\n\n| Property | Description | Example |\n|----------|-------------|---------|\n| `routeTabTitle` | Tab title text | `ref('Dashboard')` |\n| `routeTabIcon` | Tab icon class | `ref('mdi-home')` |\n| `routeTabClosable` | Can tab be closed | `ref(true)` |\n| `routeTabMeta` | Additional metadata | `ref({ badge: 5 })` |\n\n### Dynamic Titles with Computed\n\nCreate titles that update based on your component state:\n\n```vue\n\n```\n\n### Real-World Examples\n\n#### Example 1: User Profile with Name\n\n```vue\n\n```\n\n#### Example 2: Form with Unsaved Changes\n\n```vue\n\n```\n\n#### Example 3: Real-time Notifications\n\n```vue\n\n```\n\n### Using the Composable API\n\nFor advanced use cases, use the `useReactiveTab` composable:\n\n```vue\n\n```\n\n### Important Notes\n\n1. **Automatic Exposure in `\n```\n\n> π‘ **Try it yourself**: Check out the live demo at `/title-test` in the example app to see all these features in action!\n\n### Options API Support\n\nIf you're using the Options API, you need to expose the properties:\n\n```vue\n\n```\n\nOr with `defineExpose`:\n\n```vue\n\n```\n\n**Note**: With `\n```\nThe composable also exposes `serialize` / `deserialize` options so you can encrypt or customise the cookie payload.\nUse `storage: 'localStorage'` or provide a custom storage adapter when cookies are not a good fit. `debounceMs` can reduce repeated writes during rapid tab changes.\n\n## Theme system\n\nThe plugin initialises a lightweight theme layer on install:\n\n- Reads `tab-theme-style` (`'light'`, `'dark'`, or `'system'`; defaults to `'system'`).\n- Reads `tab-theme-primary-color` (defaults to `#0f172a`).\n- Applies the choice via `data-theme` and `--theme-primary` CSS variables, keeping βsystemβ in sync with OS changes.\n\nOverride the theme at runtime:\n\n```ts\nimport { setRouterTabsTheme, setRouterTabsPrimary } from 'vue3-router-tab'\n\nsetRouterTabsTheme('dark')\nsetRouterTabsPrimary('#22c55e')\n```\n\nCustomise the defaults with:\n\n```ts\nimport { initRouterTabsTheme } from 'vue3-router-tab'\n\ninitRouterTabsTheme({\n defaultStyle: 'dark',\n defaultPrimary: '#0ea5e9'\n})\n```\n\n### Custom rendering\n\nYou can override the default routed view by providing a `#default` slot. The slot receives the same values you would normally get from ``:\n\n```vue\n\n \n \n \n \n \n\n```\n\n## Advanced Features\n\n### Tab Sorting\n\nEnable drag-and-drop tab reordering with the `sortable` prop:\n\n```vue\n\n```\n\n\n\n### Persistence Options\n\nFine-grained control over tab persistence:\n\n```vue\n btoa(JSON.stringify(snapshot)),\n deserialize: (data) => JSON.parse(atob(data))\n }\"\n/>\n```\n\n## Customising the Context Menu\n\n```vue\n window.open(target.to, '_blank')\n }\n ]\"\n/>\n```\n\nPass `false` to disable the context menu entirely.\n\n### Built-in Menu Items\n\n- `refresh` - Refresh current tab\n- `refreshAll` - Refresh all tabs \n- `close` - Close current tab\n- `closeLefts` - Close tabs to the left\n- `closeRights` - Close tabs to the right\n- `closeOthers` - Close all other tabs\n\n## Programmatic API\n\nAccess the router tabs controller to programmatically manage tabs.\n\n### Using the Composable\n\n```vue\n\n```\n\n### Using Global Property\n\n```vue\n\n```\n\n### Controller Methods\n\n| Method | Parameters | Description |\n|--------|------------|-------------|\n| `openTab(to, active?, replace?)` | Route location, activate flag, replace flag | Open or activate a tab |\n| `closeTab(id, options?)` | Tab ID, close options | Close a specific tab |\n| `refreshTab(id, force?)` | Tab ID, force flag | Refresh tab component |\n| `refreshAll(force?)` | Force flag | Refresh all tabs |\n| `closeAll(options?)` | Close options | Close all closable tabs |\n| `closeOthers(id, options?)` | Tab ID, options | Close all tabs except specified |\n| `removeTab(id, options?)` | Tab ID, options | Remove tab without navigation |\n\n### Example: Custom Tab Controls\n\n```vue\n\n
\n \n \n \n
\n\n\n\n```\n\n### Tab State Access\n\n```vue\n\n```\n\n## Events\n\nRouterTab emits events for tab interactions.\n\n### Available Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `tab-sort` | `{ tab, index }` | Fired when tab drag starts |\n| `tab-sorted` | `{ tab, fromIndex, toIndex }` | Fired when tab is dropped in new position |\n\n### Usage Example\n\n```vue\n\n \n\n\n\n```\n\n## Slots\n\n- `start` / `end` β positioned on either side of the tab list (ideal for toolbars or the `` helper).\n- `default` β routed content (rendered automatically by ``).\n\n## Styling\n\nThe package ships with its own CSS bundle (imported automatically). Override CSS custom properties or the `router-tab__*` classes to customize the appearance.\n\n### CSS Custom Properties\n\n```css\n:root {\n /* Layout */\n --router-tab-header-height: 48px;\n --router-tab-sticky-top: 0px;\n --router-tab-header-z-index: 10;\n --router-tab-padding: 16px;\n --router-tab-font-size: 14px;\n \n /* Colors */\n --router-tab-primary: #0f172a;\n --router-tab-background: #ffffff;\n --router-tab-text: #334155;\n --router-tab-border: #e2e8f0;\n --router-tab-active-background: #0f172a;\n --router-tab-active-text: #ffffff;\n \n /* Icons & Buttons */\n --router-tab-icon-color: #64748b;\n --router-tab-button-background: #f1f5f9;\n --router-tab-button-color: #0f172a;\n}\n```\n\nWhen `router-tab` is rendered below a fixed app header, set `--router-tab-sticky-top` so the sticky bar locks beneath that header instead of sliding under it:\n\n```vue\n\n```\n\n```css\n.app-router-tab {\n --router-tab-sticky-top: var(--v-layout-top, 0px);\n}\n```\n\n### Custom Styles Example\n\n```css\n/* Change tab height */\n.router-tab__header {\n height: 56px;\n}\n\n/* Custom tab hover effect */\n.router-tab__item:hover {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n}\n\n/* Custom active tab */\n.router-tab__item.is-active {\n background: #4f46e5;\n border-radius: 8px 8px 0 0;\n}\n\n/* Custom close button */\n.router-tab__item-close {\n border-radius: 4px;\n}\n\n/* Dark theme adjustments */\n[data-theme=\"dark\"] .router-tab {\n --router-tab-background: #1e293b;\n --router-tab-text: #f1f5f9;\n --router-tab-border: #334155;\n}\n```\n\n## Types\n\n```ts\nimport type { TabRecord, RouterTabsSnapshot, RouterTabsPersistenceOptions } from 'vue3-router-tab'\n```\n\n## Examples\n\nCheck out the [example-app](./example-app) directory for comprehensive demos including:\n\n- **Basic Usage** - Simple tab navigation\n- **Dynamic Titles** - Reactive tab title updates ([/title-test](./example-app/src/views/TitleTestDemo.vue))\n- **Transitions** - All 7 transition effects ([/transition-demo](./example-app/src/views/TransitionDemo.vue))\n- **Composables** - Using helper composables ([/composable-demo](./example-app/src/views/ComposableDemo.vue))\n- **Advanced Features** - Sorting, context menus, persistence\n\n### Run Examples\n\n```bash\ncd example-app\nnpm install\nnpm run dev\n```\n\n## Troubleshooting\n\n### Tab titles not updating\n\n**Problem**: Tab title doesn't change when component state updates.\n\n**Solution**: Ensure you're using reactive refs or computed properties:\n\n```vue\n\n\n\n\n\n```\n\n### Transitions not working\n\n**Problem**: Page transitions don't show when refreshing tabs.\n\n**Solution**: Make sure you're not using a custom default slot that overrides transitions. Remove the custom slot or include transition components:\n\n```vue\n\n\n\n\n\n \n \n \n\n\n\n\n \n \n \n \n \n\n```\n\n### Tabs not persisting on refresh\n\n**Problem**: Tabs are lost when refreshing the browser.\n\n**Solution**: Add the `cookie-key` prop:\n\n```vue\n\n```\n\nCheck that cookies are enabled in the browser and not being blocked.\n\n### KeepAlive not working\n\n**Problem**: Component state is lost when switching tabs.\n\n**Solution**: Ensure `:keep-alive=\"true\"` (default) and components are properly keyed:\n\n```ts\n// In router config\nmeta: {\n keepAlive: true, // Enable for this route\n key: 'fullPath' // Unique key per instance\n}\n```\n\n### TypeScript errors\n\n**Problem**: TypeScript shows errors for router tab properties.\n\n**Solution**: Import types and use them:\n\n```ts\nimport type { TabRecord, RouterTabsOptions } from 'vue3-router-tab'\n\nconst options: RouterTabsOptions = {\n keepAlive: true,\n maxAlive: 10\n}\n```\n\n## Browser Support\n\n- Chrome/Edge β₯ 90\n- Firefox β₯ 88\n- Safari β₯ 14\n- Modern mobile browsers\n\n## Contributing\n\nContributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT\n\n---\n\nMade with β€οΈ by the Vue community\n","readmeFilename":"README.md"}