N
Nuxt•2mo ago
timmushen

Wanted to Share: Notebook LM Deepdive podcast on Nuxt UI 3 Migration

Hi all, I've been a huge fan of using Nuxt UI (Pro). Thank you to all that contributed to the release. I wanted to get caught up on the migration to Nuxt UI 3 and uploaded the migration guide to Notebook LM so I could listen during the office commute. This is an exciting update and wanted to the audio as it was helpful for me to get caught up quickly. You may need to log into a Google Account to access, if anyone knows a way around this let me know. https://notebooklm.google.com/notebook/044fb6bf-1a39-4509-9c2b-4fc2b38d0116/audio Deepdive podcast trained on this page: https://ui.nuxt.com/getting-started/migration
Sign in - Google Accounts
Nuxt UI
Migration - Nuxt UI v3
A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @timmushen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for sharing your experience with Nuxt UI and the audio resource you created for the migration guide. Based on the knowledge sources provided, I can see that migrating to Nuxt UI 3 involves several important changes. The migration from Nuxt UI v1 to v3 (skipping v2) includes significant updates, as documented in the How to upgrade your Nuxt documentation website to Content x UI v3 guide. Some key migration steps include: 1. Updating packages to the new versions: 
pnpm add @nuxt/ui-pro@next
pnpm add @nuxt/ui-pro@next
2. Changing how UI is configured in nuxt.config.ts: 
// New way (v3)
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

// Old way (v1)
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: ['@nuxt/ui']
})
// New way (v3)
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

// Old way (v1)
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: ['@nuxt/ui']
})
3. Moving to CSS-first theming with Tailwind CSS v4: 
@import "tailwindcss";
@import "@nuxt/ui-pro";

@source "../content/**/*";

@theme {
  --font-sans: 'DM Sans', sans-serif;
  // color variables...
}
@import "tailwindcss";
@import "@nuxt/ui-pro";

@source "../content/**/*";

@theme {
  --font-sans: 'DM Sans', sans-serif;
  // color variables...
}
4. Updating UI overloads in app.config.ts to match the new format: 
// New format (v3)
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate'
    }
  },
  uiPro: {
    footer: {
      slots: {
        root: 'border-t border-gray-200 dark:border-gray-800',
        left: 'text-sm text-gray-500 dark:text-gray-400'
      }
    }
  },
})
// New format (v3)
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate'
    }
  },
  uiPro: {
    footer: {
      slots: {
        root: 'border-t border-gray-200 dark:border-gray-800',
        left: 'text-sm text-gray-500 dark:text-gray-400'
      }
    }
  },
})
If you're also using Nuxt Content with UI Pro, there are additional migration steps for Content v2 to v3 as well. It's great that you've found an audio format helpful for learning about the migration process. The community might appreciate you sharing this resource! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@538157800480702486> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?