{"_id":"@drobinetm/multitabs-vue","_rev":"6-53d5997688440b4a05af022a2e7d6fa6","name":"@drobinetm/multitabs-vue","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.2":{"name":"@drobinetm/multitabs-vue","version":"0.1.2","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"license":"MIT","_id":"@drobinetm/multitabs-vue@0.1.2","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://drm-multitabs.dev/docs/vue","bugs":{"url":"https://github.com/drm-dev/multitabs/issues"},"dist":{"shasum":"5d7a0e6ea98df6b3713e5df5691bcda7e2db7d7c","tarball":"https://registry.npmjs.org/@drobinetm/multitabs-vue/-/multitabs-vue-0.1.2.tgz","fileCount":14,"integrity":"sha512-u4pQMY3MgzvWtrCwUkQhCzZPrYFcRZ4HW0lrF0VtRN4EFWyWZFUYG8wJ4buPzn0uK/+bxEbWz6cej8Dm4+J5QA==","signatures":[{"sig":"MEUCIHjW3gt5bal0Wr4cYit0qPKfI+aMZx9pVUUHnD5aKRueAiEAj2MGkU/FkCJg7mQ9Z5q9nuP9ZcXuRDKyHs53VUIshhE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44278},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles":"./dist/style.css"},"gitHead":"15c0d634ecf68c26d53905dc85d12f0e3cac4abb","scripts":{"dev":"vite build --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run --passWithNoTests","build":"vite build && vue-tsc --emitDeclarationOnly","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"drobinetm","email":"drobinetmorales@gmail.com"},"repository":{"url":"git+https://github.com/drm-dev/multitabs.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.9.4","description":"Browser-tab-style navigation component for Vue 3","directories":{},"_nodeVersion":"22.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.27","vite":"^5.2.11","vitest":"^1.5.3","vue-tsc":"^2.0.17","vue-router":"^4.3.2","@vue/test-utils":"^2.4.5","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.0","vue-router":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/multitabs-vue_0.1.2_1777050552241_0.07704493111455424","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@drobinetm/multitabs-vue","version":"0.1.3","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"license":"MIT","_id":"@drobinetm/multitabs-vue@0.1.3","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://drm-multitabs.dev/docs/vue","bugs":{"url":"https://github.com/drobinetm/drm-multitask-component/issues"},"dist":{"shasum":"df9c1a10ad613cca196b4e64bec805a53df42454","tarball":"https://registry.npmjs.org/@drobinetm/multitabs-vue/-/multitabs-vue-0.1.3.tgz","fileCount":15,"integrity":"sha512-9Ad8KWRMgEU5a+Di9jTQEOS5HqidinrJlwhn5C5pnWB/daFEDT5gjNg/gQbg4bjeaD0hCkM98LuILYkHLZlGrQ==","signatures":[{"sig":"MEUCIDpdpaQhCobS9/ioCDac4CYrzi3eHjzPAMdIg6pASFpUAiEApxJQ93B5hKQrRfzUMSqhYmY0Sj0j13g1hOsCrzq9JCg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fmultitabs-vue@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":46286},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles":"./dist/style.css"},"gitHead":"0845c017ec374b7070738fc704550b334e2455e6","scripts":{"dev":"vite build --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run --passWithNoTests","build":"vite build && vue-tsc --emitDeclarationOnly","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4e2dc8d0-3418-427e-bb24-4ac091a27700"}},"repository":{"url":"git+https://github.com/drobinetm/drm-multitask-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.11.0","description":"Browser-tab-style navigation component for Vue 3","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.27","vite":"^5.2.11","vitest":"^1.5.3","vue-tsc":"^2.0.17","vue-router":"^4.3.2","@vue/test-utils":"^2.4.5","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.0","vue-router":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/multitabs-vue_0.1.3_1777053270254_0.057514618683619734","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@drobinetm/multitabs-vue","version":"0.1.4","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"license":"MIT","_id":"@drobinetm/multitabs-vue@0.1.4","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://drm-multitabs-docs.netlify.app/docs/vue","bugs":{"url":"https://github.com/drobinetm/drm-multitask-component/issues"},"dist":{"shasum":"94bf86b7bc4817aa423497c3a397b00732f77ef1","tarball":"https://registry.npmjs.org/@drobinetm/multitabs-vue/-/multitabs-vue-0.1.4.tgz","fileCount":15,"integrity":"sha512-dca0NVX3cQNFAdTYnl0R1iR6caOQKCsnYK6/hNbI+COo+U47dRqMJeSNCXvV91KbGYSuJvTnHRa+ueljxnmDFg==","signatures":[{"sig":"MEYCIQCojmkls29kgJo872pNgg377+5YLZZ+7ngj77zSm5sYHQIhALx1p8tDSG+7SP8fl6M7Sj2Sg64c79/MKVpNW6umRaZo","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fmultitabs-vue@0.1.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":46310},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles":"./dist/style.css"},"gitHead":"f8558831538ad7c95f30a4a6b24284e040176e1c","scripts":{"dev":"vite build --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run --passWithNoTests","build":"vite build && vue-tsc --emitDeclarationOnly","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4e2dc8d0-3418-427e-bb24-4ac091a27700"}},"repository":{"url":"git+https://github.com/drobinetm/drm-multitask-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.11.0","description":"Browser-tab-style navigation component for Vue 3","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.27","vite":"^5.2.11","vitest":"^1.5.3","vue-tsc":"^2.0.17","vue-router":"^4.3.2","@vue/test-utils":"^2.4.5","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.0","vue-router":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/multitabs-vue_0.1.4_1777054023142_0.36553855183814443","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@drobinetm/multitabs-vue","version":"0.1.5","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"license":"MIT","_id":"@drobinetm/multitabs-vue@0.1.5","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://drm-multitabs-docs.netlify.app/docs/vue","bugs":{"url":"https://github.com/drobinetm/drm-multitabs-component/issues"},"dist":{"shasum":"1eedc6211019f03d9d9b9d8834804eb700884044","tarball":"https://registry.npmjs.org/@drobinetm/multitabs-vue/-/multitabs-vue-0.1.5.tgz","fileCount":17,"integrity":"sha512-Uj9e/qYKFciCPwiZn5cb40F4cDV5wmsuCHypLZGjl59A75ghHdCB/2nHL6JP3kVT4EImnGYGXS8q4QzcpsKgtg==","signatures":[{"sig":"MEUCIQDkpwtP3pqwk1U9EgxpGZkHS999q8EQQE5ZCzNRKGENyAIgNoBWMoYqRW+sjlcFKwFwhHXgfEiJ2FZbaprtyv1GeR8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fmultitabs-vue@0.1.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":54983},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles":"./dist/style.css"},"gitHead":"c32130d2fd3ed4ee1e57323367b79aa92ca2f90d","scripts":{"dev":"vite build --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run --passWithNoTests","build":"vite build && vue-tsc --emitDeclarationOnly","clean":"rm -rf dist","prepack":"pnpm run build","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4c59f90d-bda8-4ef9-8cbb-3ed206a5477d"}},"repository":{"url":"git+https://github.com/drobinetm/drm-multitabs-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.12.1","description":"Browser-tab-style navigation component for Vue 3","directories":{},"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.27","vite":"^5.2.11","jsdom":"^24.0.0","vitest":"^1.5.3","vue-tsc":"^2.0.17","vue-router":"^4.3.2","@vue/test-utils":"^2.4.5","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.0","vue-router":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/multitabs-vue_0.1.5_1777401795964_0.43987575579718685","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@drobinetm/multitabs-vue","version":"0.1.6","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"license":"MIT","_id":"@drobinetm/multitabs-vue@0.1.6","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"homepage":"https://drm-multitabs-docs.netlify.app/docs/vue","bugs":{"url":"https://github.com/drobinetm/drm-multitabs-component/issues"},"dist":{"shasum":"9579a66cb4ed6549449af4dac85e55f11d0ab872","tarball":"https://registry.npmjs.org/@drobinetm/multitabs-vue/-/multitabs-vue-0.1.6.tgz","fileCount":28,"integrity":"sha512-Lqw+AM6YoZr8hKCDzEPbBowl1A2QfGv45iRsr87DNZS9FIKx79IoAUPEVDVYiM/J/1C3/PSh+ceU7ly7Cxcs5g==","signatures":[{"sig":"MEUCIG6rYBzQ9ACk5EHMVbAYIBcppHyTJZUh7R/tpcX26etpAiEA8LtWeCxqLXKbbcyPQoi6wwxb6AgKjaBBDPvNkJidiSA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fmultitabs-vue@0.1.6","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":81051},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles":{"types":"./dist/styles.d.ts","default":"./dist/style.css"}},"gitHead":"d680a0874e954ea559f71f19156fc383cf58482b","scripts":{"dev":"vite build --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run --passWithNoTests","build":"vite build && vue-tsc --emitDeclarationOnly && cp src/styles.d.ts dist/styles.d.ts && vue-tsc -p test-dts/tsconfig.json","clean":"rm -rf dist","prepack":"pnpm run build","test:watch":"vitest"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4c59f90d-bda8-4ef9-8cbb-3ed206a5477d"}},"repository":{"url":"git+https://github.com/drobinetm/drm-multitabs-component.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.11.0","description":"Browser-tab-style navigation component for Vue 3","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.27","vite":"^5.2.11","jsdom":"^24.0.0","vitest":"^1.5.3","vue-tsc":"^2.0.17","vue-router":"^4.3.2","@vue/test-utils":"^2.4.5","vite-plugin-dts":"^3.9.1","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.0","vue-router":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/multitabs-vue_0.1.6_1777488297258_0.850681914704446","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@drobinetm/multitabs-vue","version":"0.1.7","description":"Browser-tab-style navigation component for Vue 3","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"homepage":"https://drm-multitabs-docs.netlify.app/docs/vue","repository":{"type":"git","url":"git+https://github.com/drobinetm/drm-multitabs-component.git","directory":"packages/vue"},"license":"MIT","type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles":{"types":"./dist/styles.d.ts","default":"./dist/style.css"}},"main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"vite build && vue-tsc --emitDeclarationOnly && cp src/styles.d.ts dist/styles.d.ts && vue-tsc -p test-dts/tsconfig.json","dev":"vite build --watch","test":"vitest run --passWithNoTests","test:watch":"vitest","lint":"eslint \"src/**/*.{ts,vue}\"","clean":"rm -rf dist","prepack":"pnpm run build"},"peerDependencies":{"vue":"^3.4.0","vue-router":"^4.3.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.4","@vue/test-utils":"^2.4.5","jsdom":"^24.0.0","vite":"^5.2.11","vite-plugin-dts":"^3.9.1","vitest":"^1.5.3","vue":"^3.4.27","vue-router":"^4.3.2","vue-tsc":"^2.0.17"},"gitHead":"ea83355e941b026899d512c3b90e680ef2b6e216","_id":"@drobinetm/multitabs-vue@0.1.7","bugs":{"url":"https://github.com/drobinetm/drm-multitabs-component/issues"},"_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-6JkhG16zs6lwRNLF4ceOrJVX1o/DzSawxPxI3f7ar3MiLKJtPDFR1Zv9MKAQuMD/EL/1py0JFlPu7oCbTKccpA==","shasum":"3f39e14df0a7ce662b0f3d690111c94e2419cb8d","tarball":"https://registry.npmjs.org/@drobinetm/multitabs-vue/-/multitabs-vue-0.1.7.tgz","fileCount":28,"unpackedSize":83108,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drobinetm%2fmultitabs-vue@0.1.7","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC9bXx76XJbeMmPCWQdS55ZhUpxWCMWkvfo1Atj1+gXMAIgILdFikEsDUMVwWUu8twNuLzdkw/IZHEd422FqU9eZxE="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4c59f90d-bda8-4ef9-8cbb-3ed206a5477d"}},"directories":{},"maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/multitabs-vue_0.1.7_1777490228178_0.13594457902428791"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-24T17:09:12.185Z","modified":"2026-04-29T19:17:08.613Z","0.1.2":"2026-04-24T17:09:12.393Z","0.1.3":"2026-04-24T17:54:30.401Z","0.1.4":"2026-04-24T18:07:03.359Z","0.1.5":"2026-04-28T18:43:16.125Z","0.1.6":"2026-04-29T18:44:57.401Z","0.1.7":"2026-04-29T19:17:08.352Z"},"bugs":{"url":"https://github.com/drobinetm/drm-multitabs-component/issues"},"license":"MIT","homepage":"https://drm-multitabs-docs.netlify.app/docs/vue","keywords":["vue","tabs","navigation","multitabs","router","vue3"],"repository":{"type":"git","url":"git+https://github.com/drobinetm/drm-multitabs-component.git","directory":"packages/vue"},"description":"Browser-tab-style navigation component for Vue 3","maintainers":[{"name":"drobinetm","email":"drobinetmorales@gmail.com"}],"readme":"# @drobinetm/multitabs-vue\n\n`@drobinetm/multitabs-vue` adds browser-tab-style workspace navigation to Vue 3\napplications. It combines a `MultiTabs` component with composables for tab\nstate, router sync, persistence, reload signals, and route-to-tab resolution.\n\n## Install\n\nInstall the package together with `vue-router`.\n\n```bash\npnpm add @drobinetm/multitabs-vue vue-router\n```\n\n## Basic usage\n\nMount `MultiTabs` in your app shell so it stays visible while the routed page\nchanges below it. Import the package styles once in your app.\n\n```vue\n<script setup lang=\"ts\">\nimport { MultiTabs } from \"@drobinetm/multitabs-vue\";\nimport \"@drobinetm/multitabs-vue/styles\";\n</script>\n\n<template>\n  <MultiTabs />\n  <RouterView />\n</template>\n```\n\n## Route mapping\n\nBy default, the package builds tabs from the active Vue Router route using\n`route.name`, `route.params`, `route.meta.title`, `route.meta.icon`, and a few\nlegacy query fields such as `caseNumber`.\n\nUse `resolveTab` to provide a domain-specific mapping and avoid depending on\nthose default conventions.\n\n```vue\n<script setup lang=\"ts\">\nimport { MultiTabs, type MultiTabResolver } from \"@drobinetm/multitabs-vue\";\n\nconst resolveTab: MultiTabResolver = (route, { defaultTab }) => {\n  if (route.name === \"users-detail\") {\n    return {\n      title: `User ${String(route.params.id)}`,\n      icon: \"person\",\n      caseTitle: defaultTab.title,\n    };\n  }\n};\n</script>\n\n<template>\n  <MultiTabs storage-key=\"crm-tabs\" :resolve-tab=\"resolveTab\" />\n</template>\n```\n\n## Composables\n\nUse `useMultiTabs()` when you need direct access to the current tab list and\nactions. Calls that use the same `storageKey` share the same reactive tab\nstore in the current runtime.\n\n```ts\nimport { createScopedStorageKey, useMultiTabs } from \"@drobinetm/multitabs-vue\";\n\nconst storageKey = createScopedStorageKey(\"crm-tabs\", \"tenant-acme\", \"user-42\");\n\nconst { tabs, currentTabId, closeTab, closeAllTabs, moveTab, reloadTab } =\n  useMultiTabs({ storageKey });\n```\n\nIf your app clears persisted tabs during logout or test teardown, also clear the\nruntime store:\n\n```ts\nimport { resetMultiTabsRuntime } from \"@drobinetm/multitabs-vue\";\n\nresetMultiTabsRuntime(\"crm-tabs\");\n```\n\nUse `createScopedStorageKey()` when your app renders multiple shells in the same\nbrowser runtime, such as tenant-aware dashboards, Astro previews, or docs\nsandboxes.\n\n```ts\nimport { createScopedStorageKey } from \"@drobinetm/multitabs-vue\";\n\nconst storageKey = createScopedStorageKey(\n  \"crm-tabs\",\n  tenantId,\n  userId,\n  \"main-shell\",\n);\n```\n\n## Component events\n\n`MultiTabs` emits `open`, `activate`, `close`, `move`, `reload`, and\n`close-all` so host shells can connect analytics, telemetry, and close guards.\n\n```vue\n<MultiTabs\n  storage-key=\"crm-tabs\"\n  @activate=\"(tab) => console.log('active', tab.id)\"\n  @close=\"(tab) => console.log('closed', tab.id)\"\n/>\n```\n\n## Controlled mode\n\nPass `tabs` and `activeTabId` when your shell owns the workspace state. Listen\nto `update:tabs` and `update:activeTabId` to keep the host source of truth in\nsync. When the host changes `activeTabId`, the component navigates to that\ntab's `to` target so router state stays aligned with the controlled selection.\n\nThe component also reacts to runtime changes in `storageKey`, `defaultIcon`, and\n`maxTabs`, so a host shell can swap workspace namespaces or limits without\nremounting the tab rail.\n\n```vue\n<MultiTabs\n  :tabs=\"tabs\"\n  :active-tab-id=\"activeTabId\"\n  :on-before-close=\"onBeforeClose\"\n  @update:tabs=\"tabs = $event\"\n  @update:activeTabId=\"activeTabId = $event\"\n/>\n```\n\nUse `onBeforeClose` to block close flows for unsaved or protected tabs.\nThe guard can return a boolean or a `Promise<boolean>`. During `close-all`, tabs\nthat fail the guard stay open.\n\nKeep `tabs` and `activeTabId` consistent when you control the rail from the\nhost. If `activeTabId` points to a tab that is not present in `tabs`, the\ncomponent has no navigation target for that external selection.\n\nUse `useTabContainerReload()` inside routed content when a tab reload should\ntrigger a refetch or remount.\n\n```ts\nimport { computed, watch } from \"vue\";\nimport { useTabContainerReload } from \"@drobinetm/multitabs-vue\";\n\nconst { getReloadNonce } = useTabContainerReload();\nconst nonce = computed(() => getReloadNonce(\"case-tab-id\"));\n\nwatch(nonce, () => {\n  // Refetch or reset local state here.\n});\n```\n\n## Theme overrides\n\nPass the `theme` prop for local overrides, or redefine the CSS variables in\nyour application styles.\n\n```vue\n<MultiTabs\n  :theme=\"{\n    activeTabBg: '#184E6C',\n    activeTabColor: '#ffffff',\n    borderRadius: '18px',\n  }\"\n/>\n```\n\n## Public API\n\nThe package exports the component, composables, and related types.\n\n- `MultiTabs`\n- `useMultiTabs`\n- `useTabContainerReload`\n- `bumpTabContainerReload`\n- `createScopedStorageKey`\n- `resetMultiTabsRuntime`\n- `generateTabId`\n- `MultiTabResolver`\n- `MultiTabItem`\n- `MultiTabCloseContext`\n- `MultiTabCloseGuard`\n- `MultiTabCloseReason`\n- `MultiTabMoveEvent`\n- `MultiTabsTheme`\n- `ResolveTabContext`\n- `ResolveTabResult`\n- `UseMultiTabsOptions`\n- `UseMultiTabsReturn`\n\n## Compatibility\n\nThe current Vue package targets Vue 3 and `vue-router@4`. In Astro, mount the\ntabs shell from a Vue island because the component depends on browser router\ncontext. If your page renders multiple previews or tenant shells, use a distinct\n`storageKey` per island, preferably with `createScopedStorageKey()`, and call\n`resetMultiTabsRuntime(storageKey)` when you clear persisted state inside the\nsame browser runtime.\n\n## Documentation\n\nRead the full Vue guide at\nhttps://drm-multitabs-docs.netlify.app/docs/vue.\n","readmeFilename":"README.md"}