Nuxt UI props error with Nuxt4
Hi,
I just created a new project with pnpm, including the Nuxt UI module during setup. However, when I try to create buttons or other components, I can't see the props of the components — IntelliSense is not working. Could this be caused by Nuxt 4?
6 Replies
Hi @Umut. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Short answer: it’s likely a TypeScript/intellisense setup issue, not Nuxt 4 itself.
Checks/fixes:
- Ensure TypeScript is enabled in SFCs: use <script setup lang="ts">. Without lang="ts", VS Code shows “Type annotations can only be used in TypeScript files” and intellisense won’t work (SO example).
- Run Nuxt once so auto-generated types are created. Nuxt generates .nuxt/nuxt.d.ts and tsconfig.app.json on nuxt dev/build, which power IDE typings (Auto-generated Types).
- Install type-checking deps and optionally enable type checking: pnpm add -D vue-tsc typescript, and use npx nuxt typecheck or typescript.typeCheck: true if desired (helps surface TS issues) (TypeScript).
- For Nuxt UI specifically, just adding the module is enough; CSS import isn’t required for types but ensure module is registered so components are auto-imported: - nuxt.config.ts: modules: ['@nuxt/ui'] (Nuxt UI installation) - Start dev server once to let @nuxt/ui augment types.
- If you’re using pnpm, ensure tailwindcss is installed or set shamefully-hoist=true (not for typings, but recommended setup) (Nuxt UI installation).
- Nuxt UI has enhanced TS integration with auto-completion for component props and app.config.ts theming. If you’re not seeing props, it usually indicates the generated types aren’t picked up by the IDE yet or TS isn’t enabled in SFCs (TypeScript Integration). If you still don’t see props: - Restart VS Code/TypeScript server after running nuxt dev. - Verify your workspace uses the generated .nuxt tsconfigs (opening the project root). - Share a minimal example (app.vue using <UButton ...>) to narrow down. It’s not a known Nuxt 4 regression per the docs; setup issues are the usual cause. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- Run Nuxt once so auto-generated types are created. Nuxt generates .nuxt/nuxt.d.ts and tsconfig.app.json on nuxt dev/build, which power IDE typings (Auto-generated Types).
- Install type-checking deps and optionally enable type checking: pnpm add -D vue-tsc typescript, and use npx nuxt typecheck or typescript.typeCheck: true if desired (helps surface TS issues) (TypeScript).
- For Nuxt UI specifically, just adding the module is enough; CSS import isn’t required for types but ensure module is registered so components are auto-imported: - nuxt.config.ts: modules: ['@nuxt/ui'] (Nuxt UI installation) - Start dev server once to let @nuxt/ui augment types.
- If you’re using pnpm, ensure tailwindcss is installed or set shamefully-hoist=true (not for typings, but recommended setup) (Nuxt UI installation).
- Nuxt UI has enhanced TS integration with auto-completion for component props and app.config.ts theming. If you’re not seeing props, it usually indicates the generated types aren’t picked up by the IDE yet or TS isn’t enabled in SFCs (TypeScript Integration). If you still don’t see props: - Restart VS Code/TypeScript server after running nuxt dev. - Verify your workspace uses the generated .nuxt tsconfigs (opening the project root). - Share a minimal example (app.vue using <UButton ...>) to narrow down. It’s not a known Nuxt 4 regression per the docs; setup issues are the usual cause. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@122082347326767107> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@Umut hi, did you find the solution?
have the same problem 😕
Yes, do you use pnpm ?
no, just npm
I tried migrate again and it worked :
https://ui.nuxt.com/getting-started/migration