Nuxt

Option 1: Nuxt Module (Recommended)

Configure the module in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['vue-stack-tabs/nuxt'],
  vueStackTabs: {
    locale: 'zh-CN' // or 'en'
  }
})

The module automatically:

• Registers the global VueStackTabs component via Nuxt's addComponent API (no need to import manually)
• Auto-imports composables (useTabActions, useTabRouter, useTabLoading)
• Applies the configured locale to vue-stack-tabs' internal i18n instance via applyStackTabsLocale

Nuxt apps also support only one <VueStackTabs> instance.

Option 2: Manual Plugin

plugins/StackTabs.ts:

import VueStackTabs from 'vue-stack-tabs'
import 'vue-stack-tabs/dist/style.css'

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.use(VueStackTabs)
})

Configure iframe Route

iframe Component

Example — components/FakeIFrame.vue:

<script setup lang="ts">
  import { useTabRouter } from 'vue-stack-tabs'
  useTabRouter()
</script>

<template></template>

Nuxt Config

nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  hooks: {
    'pages:extend'(pages: any) {
      pages.push({
        name: 'iframe',
        path: '/iframe',
        file: '~/components/FakeIFrame.vue'
      })
    }
  },
  // ...
})

Use the Component

See Props for options.

DANGER

VueStackTabs is singleton-only. Configure iframe-path for the iframe route.

Layout — layouts/default.vue:

<template>
  <div class="app-header">Header</div>
  <div class="app-body">
    <div class="app-side">Sidebar</div>
    <vue-stack-tabs iframe-path="/iframe" />
  </div>
</template>