Migrate NuxtUI 2 to 3
I have this error when I migrate NuxtUI v2 to v3
[plugin:vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore / before it, for example:
interface Props extends / @vue-ignore */ Base {}
Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.
D:/mytv-backoffice/node_modules/@nuxt/ui/dist/runtime/components/App.vue
22 | import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
23 | import { reactivePick } from '@vueuse/core'
24 | import { localeContextInjectionKey } from '../composables/useLocale'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
25 | import UToaster from './Toaster.vue'
| ^^^^^^^^^^^^^^^^^^^^^^^
26 | import UOverlayProvider from './OverlayProvider.vue'
11 Replies
Hi @Nebel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I can see you're encountering an error while migrating from Nuxt UI v2 to v3. This is a compiler error related to type resolution in Vue components.
The migration from Nuxt UI v2 to v3 involves significant changes as Nuxt UI v3 has been completely rebuilt from the ground up with a new architecture. As mentioned in the documentation, "migrating from Nuxt UI v2 to v3 will require significant effort" Migration.
Let me help you address this specific error and provide guidance on the migration process:
Error Resolution
The error you're seeing is related to type resolution in the Vue compiler. It's occurring in the App component from the @nuxt/ui package. This is likely happening because:
1. Nuxt UI v3 uses Reka UI as its underlying component library (replacing Headless UI)
2. There might be compatibility issues with your current TypeScript setup
To resolve this specific error, you could try:
1. Make sure you've updated all related dependencies, especially TypeScript
2. Follow the complete migration steps outlined in the migration guide
Migration Steps
Here's a comprehensive approach to migrate from Nuxt UI v2 to v3:
1. Update Tailwind CSS
Nuxt UI v3 uses Tailwind CSS v4 which has a CSS-first configuration approach:
Create a
main.css file and import it in your nuxt.config.ts:
2. Update Nuxt UI Package
Install the latest version:
3. Wrap Your App with the App Component
4. Update Component Usage
Many components have been renamed or have changed APIs:
- Divider → Separator
- Dropdown → DropdownMenu
- FormGroup → FormField
- Range → Slider
- Toggle → Switch
- Notification → Toast
- VerticalNavigation → NavigationMenu with orientation="vertical"
- HorizontalNavigation → NavigationMenu with orientation="horizontal"
5. Update Theming System
The theming system has changed to use Tailwind Variants API:
6. Update Props and Directives
Many props have been renamed for consistency:
- links and options props are now items
- Use v-model:open instead of v-model for modals and similar components
For your specific error, you might need to add the Vue ignore comment as suggested in the error message if you're extending types that can't be resolved. However, this is more of a workaround than a proper fix.
The comprehensive migration guide is available at Nuxt UI Migration Guide which provides more detailed instructions for each aspect of the migration.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@765652891935047720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@Nebel Would you have more information to give (package.json, vite.config, etc...)?
package.json
JSON
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"rm": "rm -rf node_modules && yarn install"
},
"dependencies": {
"@nuxt/fonts": "0.10.3",
"@nuxt/scripts": "^0.11.5",
"@nuxtjs/turnstile": "0.9.12",
"@vueuse/core": "^13.0.0",
"apexcharts": "^4.5.0",
"nuxt": "^3.16.1",
"nuxt-security": "2.1.5",
"pinia": "^3.0.1",
"qs": "^6.14.0",
"vue": "latest",
"vue-router": "latest",
"vue3-apexcharts": "^1.8.0",
"zod": "^3.24.2"
},
"devDependencies": {
"@nuxt/eslint": "^1.2.0",
"@nuxt/ui": "^3.0.1",
"@pinia/nuxt": "^0.10.1",
"@types/qs": "^6.9.18",
"@vueuse/nuxt": "^13.0.0",
"pinia-plugin-persistedstate": "^4.2.0"
},
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
Did you manage to solve it? I'm going through the same problem.
@jvler Would you be able to provide more information, such as the
package.json, nuxt.config.ts, and so on?nuxt.config.ts
import { resolve } from "node:path"
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
app: {
...
},
routeRules: {
...
alias: {
...
},
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
ssr: false,
modules: [
'nuxt-bugsnag',
'nuxt-scheduler',
"dayjs-nuxt",
'@pinia/nuxt',
'@nuxt/ui',
'nuxt-gtag',
'@nuxtjs/robots',
"@nuxtjs/google-fonts"
],
googleFonts: {
...
},
robots: {
...
},
vite: {
plugins: [
tailwindcss(),
],
},
nitro: {
...
},
dayjs: {
...
},
bugsnag: {
...
},
runtimeConfig: {
...
},
compatibilityDate: '2024-10-08'
})
jvler9485 has been warned
Reason: Mass mention
jvler9485 has been warned
Reason: Mass mention
jvler9485 has been warned
Reason: Mass mention
"dependencies": {
"nuxt/ui": "^3.0.2",
"tailwindcss/vite": "^4.1.0",
"vite": "^6.2.4",
"vue": "^3.5.13",
...
}
I found out that I was missing TypeScript in the dependencies. yarn add typescript did the trick 🙂