Open source UI @drobinetm/multitabs
GitHub
Live demo

Vue

A real instance of @drobinetm/multitabs-vue running with vue-router using createMemoryHistory so it doesn't affect the page URL. The docs sandbox runs as an isolated Vue-only island and uses a scoped storageKey so preview state does not bleed into other Astro islands.

← Back to Vue docs
Vue review lab

Edge-case sandboxes

Focused states for overflow, tab limits, long titles, resolveTab(), and custom slots. Each sandbox runs in its own isolated preview.

Overflow

Many open tabs

Use this isolated shell to test horizontal overflow, dropdown behavior, and drag targets with several open routes.

Example code 
<MultiTabs
  storage-key=MultiTabs
  :theme=storage-key
/>
Limit

Maximum tab cap

Opens routes inside a workspace capped at three tabs so teams can validate removal behavior before shipping.

Example code 
<MultiTabs
  storage-key=MultiTabs
  :max-tabs=storage-key
  :theme==
/>
Labels

Very long titles

Focuses on truncation, hover titles, and dropdown readability for routed records with long human labels.

Example code 
<MultiTabs
  storage-key=MultiTabs
  :resolve-tab=storage-key
  :theme==
/>
Resolver

Dynamic route mapping

Demonstrates resolveTab() with route params mapped to richer workspace labels.

Example code 
const resolveTab = (route) => ({
  title: MultiTabs,
  icon: storage-key,
})

<MultiTabs
  storage-key==
  :resolve-tab=:resolve-tab
  :theme==
/>
Slots

Custom icons and theme

Shows the visual slots and component-scoped theme tokens without affecting the standard Vue demo.

Example code 
<MultiTabs
  storage-key=MultiTabs
  :theme=template
>
  <template #launcher-icon><span>AP</span></template>
  <template #tab-icon><span>T</span></template>
  <template #close-icon><span>X</span></template>
</MultiTabs>