Nuxt•5d ago

Nuxt 4.2.1 + NuxtUI 4.2.1 Project with a separate Spring BE. NuxtUI 4.2.1 intellisense not working.

Intellisense for component calls (i.e. UCard or UTabs) not showing while using VS Code. New to this framework and having to type <> manually is really slowing me down instead of just being able to click Tab and auto complete it.

2 Replies

kapa.ai•5d ago

Hi @MateoK. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt UI component IntelliSense in VS Code depends on TypeScript + Volar correctly understanding your Nuxt project and aliases, not on your backend setup. From the provided sources, there’s no Nuxt‑UI–specific bug mentioned for Nuxt 4.2.1 + Nuxt UI 4.2.1, so this is most likely an editor/configuration issue rather than Nuxt itself. Based on the docs and issues you shared, here are the concrete things to check: 1. Use Volar (and takeover mode) for Vue/TS - Install the Vue – Volar extension. - Disable the built‑in “TypeScript and JavaScript Language Features” extension for the workspace so Volar runs in takeover mode (this is the setup used in the TS/intellisense answers you referenced). [Getting TS in SFCs] 2. Ensure TypeScript is enabled in SFCs - Your <script setup> blocks should have lang="ts":

     <script setup lang="ts">
     // …
     </script>

     <script setup lang="ts">
     // …
     </script>

- Without lang="ts", VS Code will treat the file as plain JS and type features won’t work properly. [Getting TS in SFCs] 3. Use the workspace TypeScript version - Nuxt’s new experimental TypeScript plugin (improved DX and alias support) requires VS Code to use the workspace TS version, not the built‑in one. [TS plugin support] - In VS Code: open a TS/ Vue file → click the TS version in the status bar → Use Workspace Version. 4. (Optional) Enable Nuxt’s experimental TypeScript plugin If you’re on Nuxt 4.2.x, you can turn on the experimental TS plugin which improves tooling:

   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       typescriptPlugin: true,
     },
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       typescriptPlugin: true,
     },
   })

This is specifically designed to improve TypeScript integration in Nuxt projects. [TS plugin support] 5. Check aliases / module resolution - Nuxt provides aliases like @ / ~ and virtual imports like #components. VS Code must understand them to power IntelliSense. - A lot of alias/intellisense problems come from TS not picking up Nuxt’s generated tsconfig (or from custom tsconfig overrides). Nuxt’s guidance is to extend .nuxt/tsconfig.json and avoid unnecessary extra include/paths unless you know why. [Global types answer] - If you customized compilerOptions.paths, make sure you didn’t break or override Nuxt’s defaults. 6. Reload TS / Volar after config changes - After changing nuxt.config.ts or tsconfig, run nuxi prepare if required and then restart the TypeScript server / VS Code so Volar sees the changes. [Alias order answer] If, after these steps, <UCard>/<UTabs> still don’t appear in completions, the knowledge sources you provided don’t mention a specific fix or known bug for Nuxt UI 4.2.1 IntelliSense, so I can’t point to a versioned patch. In that case, I’d suggest: - Creating a minimal repro and checking if IntelliSense works there. - If it’s broken only in your main project, carefully diff your nuxt.config.ts and tsconfig.json against a fresh Nuxt 4.2.x + Nuxt UI project generated by npx nuxi@latest init. The sources you shared don’t include a Nuxt‑UI‑specific IntelliSense configuration or workaround beyond the general TS / editor setup above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@291221958094356490> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt 4.2.1 + NuxtUI 4.2.1 Project with a separate Spring BE. NuxtUI 4.2.1 intellisense not working.

Did you find this page helpful?