Can I use Nuxt UI in a plain Vue app without Nuxt?

Updated

Yes. Nuxt UI is described as a Vue component library for Nuxt and any Vue app, so a plain Vue project is a supported target. The main condition is that your project already uses Tailwind CSS, since the library's components are built on Reka UI and Tailwind CSS rather than on a Nuxt-only runtime.

What the library actually depends on

The official description lists three foundations:

  • Reka UI for accessible component behavior
  • Tailwind CSS for styling
  • TypeScript for typed components

None of these are Nuxt-specific. Nuxt is one way to consume the library, not a requirement of the components themselves. The site also states that icons, fonts, color mode, i18n, and typography are "already wired in," which is a convenience layer rather than a hard dependency on the Nuxt framework.

What you need before installing

Requirement Why it matters
A Vue app The library targets Vue components
Tailwind CSS configured Components are styled with Tailwind; the docs show a main.css that imports tailwindcss and @nuxt/ui
A build setup that handles CSS imports The documented entry point is a CSS file, not a runtime plugin

The site's own example shows the styling entry point as a CSS file:

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', sans-serif;
}

If your plain Vue project already has a Tailwind pipeline, this is the shape of the file you would adapt. If it does not, set up Tailwind first — that is the real prerequisite, not Nuxt.

What you give up without Nuxt

Nuxt provides module-level integration: auto-imports, configuration through app.config.ts, and framework conventions that reduce setup code. In a plain Vue app you configure and import more explicitly. The components and theme are the same; the ergonomics differ.

The site references app.config.ts alongside main.css, which reflects that configuration convention. In a non-Nuxt app you would handle equivalent configuration through your own build setup rather than assuming Nuxt's module system.

How to decide

Use Nuxt UI in a plain Vue app if:

  • You already run Tailwind CSS
  • You want the same component set and theme across a Nuxt project and a plain Vue project
  • You are comfortable wiring configuration yourself instead of relying on Nuxt modules

Stay with Nuxt if:

  • You want auto-imports and module-based configuration with minimal setup
  • You are starting fresh and have no reason to avoid Nuxt

Look elsewhere if:

  • Your project does not use Tailwind and you do not want to add it
  • You need a component library with no CSS framework assumption

Verifying it works

After installing, the practical check is whether a component renders with correct styling and accessible behavior. The site advertises 125+ accessible, TypeScript components, so a single component test — rendering one interactive element and confirming keyboard behavior and Tailwind styles — tells you whether the CSS import and build pipeline are wired correctly.

The most common failure point is the CSS entry: if @import "@nuxt/ui" is missing or Tailwind is not processing the file, components render unstyled even though the JavaScript loads.