Nuxt•3mo ago

NuxtUI 4 Intellisense

I am setting up a Vue + Typescript project (without Nuxt) and wanted to try out the new features in NuxtUI 4. I finished the getting started guide but noticed that I am not getting any intellisense suggestions for the NuxtUI components. I was wondering if there was a way to get this working or maybe turning off auto-imports?

17 Replies

kapa.ai•3mo ago

Hi @Yianni. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Short answer: yes—you can get IntelliSense for Nuxt UI 4 in a plain Vue + TypeScript app, but you need to add the Nuxt UI (or UI Pro) Vite plugin and include the generated d.ts files in your tsconfig. You can also disable auto-imports if you prefer explicit imports. Do this: 1) Install and add the Vite plugin - For Nuxt UI:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

[Nuxt UI Vue install] - For Nuxt UI Pro, use:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [vue(), uiPro()]
})

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [vue(), uiPro()]
})

[UI Pro install; Replace plugin] 2) Include generated type declarations The plugin registers unplugin-auto-import and unplugin-vue-components, which generate auto-imports.d.ts and components.d.ts. Add them to your tsconfig includes:

// tsconfig.app.json (or tsconfig.json)
{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

// tsconfig.app.json (or tsconfig.json)
{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

And consider gitignoring them:

# .gitignore
auto-imports.d.ts
components.d.ts

# .gitignore
auto-imports.d.ts
components.d.ts

[Nuxt UI Vue install; UI Pro install] 3) TypeScript alias for theme types (optional but helps in Vite config)

// tsconfig.node.json
{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

// tsconfig.node.json
{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

[Nuxt UI Vue install; UI Pro install] 4) Ensure Tailwind and CSS are set up per guide, then restart your IDE after the first build so it picks up the generated d.ts. Nuxt UI highlights its improved TypeScript DX (auto-completion for props/slots, type-safe theming), which you should see once the above is in place. [TypeScript integration] If you want to turn off auto-imports - In Nuxt projects, you can disable auto-imports via nuxt.config imports options. However, since you’re not using Nuxt here, auto-import behavior is provided by the Vite plugin (unplugin-auto-import/unplugin-vue-components). To effectively “turn off” auto-imports in your Vue app, remove the Nuxt UI Vite plugin and instead import components explicitly, or adjust the underlying unplugin configuration if you manage it yourself. The Nuxt-side setting looks like this (for reference in Nuxt projects):

// nuxt.config.ts (Nuxt only)
export default defineNuxtConfig({
  imports: { autoImport: false }
})

// nuxt.config.ts (Nuxt only)
export default defineNuxtConfig({
  imports: { autoImport: false }
})

[Bridge disable auto-imports; Auto-imports concept] Notes and common gotchas - With pnpm, either set shamefully-hoist=true or install tailwindcss, vue-router, and @unhead/vue at the project root. [Nuxt UI Vue install; UI Pro install] - After adding the plugin, run the dev server once so d.ts files are generated, then reload VS Code/your IDE. - Ensure your tsconfig include globs actually cover your src and the generated d.ts files. If you follow the steps above and still don’t see IntelliSense, let me know your project layout and tsconfig contents, and I can help pinpoint what’s missing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

YianniOP•3mo ago

@kapa.ai Here is my tsconfig.app.json:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts", "src/**/*.tsx", "auto-imports.d.ts", "components.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts", "src/**/*.tsx", "auto-imports.d.ts", "components.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thanks for sharing your tsconfig. For Nuxt UI 4 IntelliSense in a plain Vue + TS app, a few key pieces must be in place. Based on the docs, please double‑check the following: 1) Ensure the Nuxt UI Vite plugin is enabled
- For Nuxt UI:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

This plugin registers unplugin-auto-import and unplugin-vue-components, which generate auto-imports.d.ts and components.d.ts that power component/prop IntelliSense. [Installation (Vue)] 2) Include the generated d.ts files in tsconfig
You’ve already added them, which is correct:

"include": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "auto-imports.d.ts",
  "components.d.ts"
]

"include": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "auto-imports.d.ts",
  "components.d.ts"
]

This matches the guidance. [Installation (Vue)] 3) Run the dev server, then restart the IDE
The d.ts files are generated by the plugin. Run Vite once so they appear, then reload your IDE so it picks them up. [Installation (Vue)] 4) pnpm users: hoist or install peer deps
If you use pnpm, either enable shamefully-hoist or install tailwindcss, vue-router, and @unhead/vue at the project root. Missing these can prevent the plugin from working as expected. [Installation (Vue)] 5) Optional: add theme alias for type hints in Vite config files
If you want IntelliSense when editing vite.config.ts related to UI theme types, add:

// tsconfig.node.json
{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

// tsconfig.node.json
{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

[Installation (Vue)] 6) Gitignore the generated files (not required, but recommended)

auto-imports.d.ts
components.d.ts

auto-imports.d.ts
components.d.ts

[Installation (Vue)] About turning off auto-imports
In a plain Vue app, the auto-imports come from the Nuxt UI Vite plugin. To disable them, remove the plugin (and import components explicitly), or customize the underlying unplugin configs yourself. The Nuxt-specific “imports” setting does not apply in a non‑Nuxt project. [Installation (Vue); TypeScript integration] If after confirming the plugin is active and d.ts files are generated you still don’t get IntelliSense, please share: - Your vite.config.ts - Whether auto-imports.d.ts and components.d.ts are actually generated at project root - Your package manager (pnpm/yarn/npm) and versions I can help pinpoint the missing link. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

YianniOP•3mo ago

@kapa.ai vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
import ui from '@nuxt/ui/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
    ui(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
import ui from '@nuxt/ui/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
    ui(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

auto-imports.d.ts and components.d.ts are generated at project root package manager is npm 10.9.3

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thanks for the details — your Vite setup and tsconfig look correct for Nuxt UI in a plain Vue app. Since auto-imports.d.ts and components.d.ts are generated at the project root, the plugin is running as expected. That usually means IntelliSense issues are down to editor pickup or missing TS includes. Checklist to get IntelliSense working: 1) Ensure the generated d.ts files are included by your TS project - Your include looks fine, but make sure VS Code/your IDE is actually using tsconfig.app.json as the active TS config. Some setups need tsconfig.json to extend tsconfig.app.json (or you can move the include there). The docs explicitly require including both auto-imports.d.ts and components.d.ts. [Installation (Vue)] 2) Restart the IDE after the files are generated - The Nuxt UI Vite plugin generates those files on first dev/build; you typically need to restart the IDE (or TS server) so IntelliSense picks them up. [Installation (Vue)] 3) Add the theme alias for TypeScript (helps completion in config context) - Optional but recommended for better type hints in Vite config:

// tsconfig.node.json
{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

// tsconfig.node.json
{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

[Installation (Vue)] 4) Verify editor setup for Vue + TS - In SFCs, ensure you’re using <script setup lang="ts"> so the editor parses TypeScript. Without lang="ts", TS features won’t trigger. [TypeScript support] - If you’re using VS Code, make sure Volar is enabled (and Takeover mode if desired). A common symptom of missing lang="ts" is TS-only syntax errors in SFCs, as noted in the referenced Q&A. [SO fix] 5) pnpm-specific note (not your case, but FYI) - With pnpm you’d need shamefully-hoist or install certain deps; with npm 10.9.3 you can ignore this. [Installation (Vue)] 6) Gitignore recommendations - Not required, but you can ignore the generated files:

auto-imports.d.ts
components.d.ts

auto-imports.d.ts
components.d.ts

[Installation (Vue)] If after ensuring <script setup lang="ts"> and restarting the IDE you still don’t see prop/slot suggestions on Nuxt UI components: - Share a minimal SFC where it fails (e.g., using <USelect ...>). - Confirm which editor you’re using (VS Code/WebStorm) and whether it’s reading tsconfig.app.json vs tsconfig.json. Nuxt UI 4 specifically advertises enhanced TypeScript auto-completion for component props/slots when set up this way, so you should see it once the editor recognizes the generated declarations. [TypeScript integration; Installation (Vue)] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

YianniOP•3mo ago

@kapa.ai Here is an SFC where it fails

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <UApp>
    <UDashboardGroup>

    </UDashboardGroup>
  </UApp>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <UApp>
    <UDashboardGroup>

    </UDashboardGroup>
  </UApp>
</template>

I am using VSCode and my tsconfig.json looks like this:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thanks for the repro. Your setup is very close. A few checks and tweaks usually make VS Code pick up Nuxt UI component types in a plain Vue app: 1) Make sure the generated declaration files are included by the active TS project - The Nuxt UI Vite plugin generates auto-imports.d.ts and components.d.ts. They must be in your tsconfig “includes” that VS Code uses. Your tsconfig.app.json already includes them, but VS Code must load that config via project references (which you did). After running the dev server once (so the d.ts files exist), restart VS Code or the TS server. [Installation (Vue); Installation (Vue)] 2) Confirm <script setup lang="ts"> is present in SFCs - You have it, which is required for TypeScript in SFCs. Missing lang="ts" causes IntelliSense errors and prevents TS features from working. [Vue with Nuxt; SO fix] 3) Verify the plugin is active in Vite - Your vite.config.ts includes ui() from @nuxt/ui/vite, which is correct and is what generates those d.ts files for auto-imports and components. [Installation (Vue)] 4) Add the theme alias for config-time types (optional but helps) - For better type completion in Vite config or theme-related types, add a path alias in tsconfig.node.json:

{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

{
  "compilerOptions": {
    "paths": {
      "#build/ui": ["./node_modules/@nuxt/ui/.nuxt/ui"]
    }
  }
}

[Installation (Vue)] 5) Editor pickup tips - After you see auto-imports.d.ts and components.d.ts at project root, restart VS Code so it reloads the TS project. - Ensure VS Code is using your root tsconfig.json (with “references” to tsconfig.app.json). If IntelliSense still doesn’t show on <UApp> or <UDashboardGroup>, temporarily copy the includes into a root-level tsconfig.json (instead of only via references) to test whether VS Code is missing the referenced project. Nuxt UI 4 advertises enhanced TypeScript auto-completion for props/slots; with the Vite plugin enabled and the generated d.ts files included, you should get IntelliSense on components like UApp and UDashboardGroup. [TypeScript integration; Installation (Vue)] If it still fails: - Confirm those components exist in your installed @nuxt/ui version and that components.d.ts lists them. - Share the contents/paths of the generated components.d.ts, and I can help spot why VS Code might not be resolving it. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

YianniOP•3mo ago

@kapa.ai 1) I have already restarted VSCode multiple times after running the server to generate the files 4) I have already added the path alias shown in tsconfig.node.json Here is the contents of my generated components.d.ts:

/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}

/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    RouterView: typeof import('vue-router')['RouterView']
    UApp: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']
    UDashboardGroup: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/DashboardGroup.vue')['default']
  }
}

/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}

/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    RouterView: typeof import('vue-router')['RouterView']
    UApp: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']
    UDashboardGroup: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/DashboardGroup.vue')['default']
  }
}

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thanks—that components.d.ts snippet is the key. The Vite plugin is generating global component types correctly, but the import paths inside your generated file are absolute from project root:

UApp: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']

UApp: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']

VS Code’s IntelliSense typically expects these generated declarations to resolve cleanly. Two practical checks from the docs: - Ensure those generated d.ts files are included by the TS project your editor actually loads. The Nuxt UI guide explicitly says to include auto-imports.d.ts and components.d.ts in your tsconfig includes (you did), and to restart the IDE after generation so they’re picked up. [Installation (Vue); Installation (Vue)] - Confirm your SFCs use TypeScript mode with <script setup lang="ts"> (you do). Missing lang="ts" is a common cause of IntelliSense issues in Vue SFCs. [Vue with Nuxt; SO fix] Given that both are satisfied and the files are generated, here’s what to try next: 1) Make tsconfig.json the single source your editor reads - VS Code sometimes doesn’t fully wire IntelliSense through project references. As a test, add the includes for auto-imports.d.ts and components.d.ts directly to the root tsconfig.json (not only tsconfig.app.json) and reload the TS server. The Nuxt UI docs show those files must be included for completion. [Installation (Vue)] 2) Verify components.d.ts lists the components you’re using - It does list UApp and UDashboardGroup, so you should get prop/slot hints once the file is picked up. Nuxt UI highlights improved TypeScript auto-completion for props/slots after setup. [TypeScript integration] 3) Confirm the declarations are at project root and not gitignored before the editor scans - The guide recommends gitignoring them, but only after your editor is recognizing them. [Installation (Vue)] 4) Optional: theme alias for config-time types - You already added the #build/ui alias in tsconfig.node.json, which aligns with the docs. [Installation (Vue)] If IntelliSense still doesn’t trigger on <UApp> or <UDashboardGroup> after step 1, could you share whether hovering those tags shows types from components.d.ts, and whether prop suggestions appear when typing a prop attribute? With your current components.d.ts content and the documented setup, IntelliSense should be available. [Installation (Vue); TypeScript integration] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

YianniOP•3mo ago

@kapa.ai It seems like the intellisense is working for the component's props after each time I run the project, but I still don't have autocomplete for components. If I want to use a certain component, I have to find the name in the docs

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You’ve got prop IntelliSense (from the generated components.d.ts), but not tag-name completion when you type <U… — that’s typically an editor pickup issue rather than a Nuxt UI config problem. What Nuxt UI guarantees in a plain Vue app: - The Vite plugin registers unplugin-auto-import and unplugin-vue-components, which generate auto-imports.d.ts and components.d.ts with GlobalComponents so editors can know the tags exist. You’ve confirmed those files are generated and included. [Installation (Vue); TypeScript integration] Why you see props but not tag-name suggestions: - VS Code’s component tag completion relies on the Vue tooling (Volar) recognizing GlobalComponents. The docs don’t provide additional Nuxt-UI–specific steps beyond generating and including the d.ts files, so if tag completion still doesn’t appear, it’s an editor/extension behavior rather than missing Nuxt UI wiring. The Nuxt UI docs only document generating those d.ts files and including them in tsconfig; they don’t mention a separate step to enable tag-name completion. [Installation (Vue)] Things to try (grounded in docs and common setup): - Ensure the two generated files are in tsconfig that VS Code actually uses (you can temporarily add them to the root tsconfig.json include to verify pickup). [Installation (Vue)] - Keep using <script setup lang="ts"> in SFCs; missing lang="ts" can degrade TS-powered IntelliSense. [TypeScript support; SO fix] - Confirm the Nuxt UI Vite plugin is active (it is, since the files are generated). [Installation (Vue)] Limitations/uncertainty: - The knowledge sources don’t explicitly document enabling component tag-name autocomplete in VS Code beyond the generated d.ts setup. They only guarantee type generation and improved prop IntelliSense once those files are included. I’m sorry, but there’s no information about an extra Nuxt UI–specific step to force tag-name suggestions in the editor. [Installation (Vue); TypeScript integration] If you want to avoid guessing component names until tag completion works, you can: - Turn off the auto-import feature by removing the Nuxt UI Vite plugin, then import components explicitly from @nuxt/ui. That way, your IDE will suggest imports as you type component names. Note: in a non‑Nuxt app, auto-imports are provided by the Nuxt UI Vite plugin; disabling it removes both auto-imports and the generated types. [Installation (Vue)] If you’d like, share a short screen capture or confirm whether typing <U triggers any suggestions at all; with the current docs, the main levers we have are those d.ts files and editor configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

NuxtUI 4 Intellisense

Did you find this page helpful?