#Having trouble migrating to Nuxt UI v3

3 messages · Page 1 of 1 (latest)

keen moonBOT
#

Hi @halcyon fjord. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Migrating your custom Tab styles from Nuxt UI v2 to v3 requires updating your app.config.ts to match the new theming system, which now uses the Tailwind Variants API. The structure for overriding component styles has changed significantly—slot and variant overrides are now nested under slots and variants keys, and the old flat style overrides are no longer supported.

Your v2 config:

export default defineAppConfig({
  ui: {
    tabs: {
      list: {
        width: "max-w-sm",
        background: "bg-gray-200 dark:bg-gray-700",
        marker: {
          background: "dark:bg-gray-800"
        }
      }
    }
  }
})

How to migrate to v3:

  1. Move overrides to the slots key:
    In v3, you override the classes for each slot (e.g., list, indicator, etc.) inside a slots object.

  2. Use Tailwind classes directly:
    You can now assign your custom classes directly to the relevant slots.

Example migrated config for v3:

export default defineAppConfig({
  ui: {
    tabs: {
      slots: {
        list: 'max-w-sm bg-neutral-200 dark:bg-neutral-700',
        indicator: 'dark:bg-neutral-800',
        // Add other slot overrides as needed
      }
    }
  }
})
  • Note: The color gray has been renamed to neutral in v3, so update your Tailwind classes accordingly (e.g., bg-gray-200 → bg-neutral-200) see migration guide.
  • The marker slot from v2 is now called indicator in v3 see theme docs.

Summary of changes:

  • All style overrides must be placed under slots.
  • Use the new color aliases (neutral instead of gray).
  • Refer to the Tabs theme section for all available slots and their names.