shadcn-nuxt

library2.6.2jsnpmunverified

shadcn-nuxt is a Nuxt.js module designed to seamlessly integrate shadcn/ui components (specifically the Vue implementation, shadcn-vue) into Nuxt 3 applications. It automates the setup and configuration process, offering features like automatic import of components into your Nuxt project, abstracting away manual configuration of Tailwind CSS and component paths. The current stable version is 2.6.2, with frequent bug fixes and feature enhancements, indicating an active development cycle. Key differentiators include its robust auto-import mechanism, support for multiple component directories with custom prefixes, and alignment with the upstream shadcn-ui API for consistency. It aims to simplify the developer experience by providing a pre-configured solution for using shadcn-vue's UI library within the Nuxt ecosystem.

web-framework devops

npm install shadcn-nuxt

github ↗package ↗

INSTALL

IMPORT

SIG · SHADCN-NUXT

shadcn-nuxt

web-frameworkjavascriptv2.6.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

"shadcn-nuxt"

✓ export default defineNuxtConfig({ modules: [ 'shadcn-nuxt' ] })

✗ import shadcnNuxt from 'shadcn-nuxt'

This package is a Nuxt module and is configured in `nuxt.config.ts` by adding its name string to the `modules` array. It does not export JavaScript symbols for direct import in client-side or server-side application logic.

shadcn (config property)

✓ export default defineNuxtConfig({ shadcn: { prefix: '', componentDir: './components/ui' } })

✗ import { shadcn } from 'shadcn-nuxt'

Module-specific options are passed via the `shadcn` property within the `defineNuxtConfig` object, adhering to Nuxt's module configuration patterns.

Components (e.g., Button)

✓ <template> <Button>Click me</Button> </template>

✗ import { Button } from '@/components/ui/Button.vue'

Components are automatically registered and imported by Nuxt through this module, eliminating the need for explicit `import` statements in `.vue` files, provided they are correctly added via `shadcn-vue add` and reside in the configured `componentDir`.

Demonstrates how to install `shadcn-nuxt` as a Nuxt module and configure it in `nuxt.config.ts`, followed by a basic example of using an auto-imported Shadcn Vue component in an application.

import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ modules: [ 'shadcn-nuxt' ], shadcn: { /** * Prefix for all the imported component */ prefix: '', /** * Directory that the component lives in. * @default "./components/ui" */ componentDir: './components/ui' } }) // In a Vue component (e.g., app.vue or any page/component file) <script setup lang="ts"> // Button component is auto-imported by shadcn-nuxt </script> <template> <div> <h1>Welcome to Nuxt with Shadcn Vue!</h1> <Button>Click me</Button> </div> </template>

Debug

Known issues

breakingThe `shadcn-nuxt` module updated its internal API to align with `shadcn-ui` in v2.6.0. While specific breaking changes are not explicitly listed, this often implies changes in configuration options or component usage patterns for closer parity with the upstream `shadcn-ui` philosophy.

fix

Consult the official `shadcn-vue` documentation and `shadcn-nuxt` changelog for specific migration steps. Re-evaluate your `nuxt.config.ts` `shadcn` configuration and component usage.

affects: >=2.6.0

gotchaConfiguring multiple component directories with `componentDir` as an array (e.g., `['@/components/ui', { path: '@/components/ai', prefix: 'Ai' }]`) is supported to prevent Nuxt's default auto-import scanning from causing console warnings. Failing to configure these paths correctly within the `shadcn` module options can lead to unexpected import behavior or warnings.

fix

Ensure all custom component directories intended for Shadcn Vue components are explicitly listed within the `shadcn.componentDir` array in `nuxt.config.ts`. Utilize prefixes for clarity and to prevent naming conflicts.

affects: >=2.5.2

gotchaWhile `shadcn-nuxt` sets up the module integration, it does not automatically install or scaffold individual Shadcn Vue components. Developers still need to run `npx shadcn-vue add <component-name>` (or the equivalent `npx nuxt shadcn-vue add <component-name>` if `shadcn-nuxt` provides a CLI wrapper) to fetch the component code into their project's `componentDir`.

fix

After installing `shadcn-nuxt` and configuring it, use the `shadcn-vue` CLI (or the integrated Nuxt CLI command if available) to add desired components to your project's configured `componentDir` (e.g., `npx shadcn-vue add button`).

affects: >=1.0.0

gotchaOlder versions of `shadcn-nuxt` or `shadcn-vue` CLI might have had issues resolving `tsconfig.json` path aliases correctly, particularly for nested paths or when multiple alias prefixes were used. This could lead to component not found errors or incorrect scaffolding.

fix

Ensure you are on `shadcn-nuxt` version `2.6.2` or higher to benefit from improved alias resolution. Double-check your `tsconfig.json` paths and `shadcn.componentDir` configuration for consistency. Manually verify the generated component paths after running `npx shadcn-vue add`.

affects: <2.6.2

Errors

Common errors & fixes

Cannot find module 'shadcn-nuxt' or its corresponding type declarations.

The package was not installed or installed incorrectly, or `nuxt.config.ts` is not correctly configured for TypeScript.

fix

Ensure `shadcn-nuxt` is installed as a dev dependency (`pnpm add -D shadcn-nuxt` or `npm install --save-dev shadcn-nuxt`) and that `nuxt.config.ts` is a TypeScript file.

Component is not defined

The component has not been added to the project via `shadcn-vue add`, or the `componentDir` in `nuxt.config.ts` is incorrect, preventing auto-import.

fix

Run `npx shadcn-vue add <ComponentName>` to scaffold the component into your project. Verify that `shadcn.componentDir` in `nuxt.config.ts` correctly points to the directory where your shadcn-vue components reside (e.g., `./components/ui`).

Failed to resolve component: <ComponentName>

The component has not been added to the project via `shadcn-vue add`, or the `componentDir` in `nuxt.config.ts` is incorrect, preventing auto-import.

fix

Run `npx shadcn-vue add <ComponentName>` to scaffold the component into your project. Verify that `shadcn.componentDir` in `nuxt.config.ts` correctly points to the directory where your shadcn-vue components reside (e.g., `./components/ui`).

Tailwind CSS compilation error: 'Your custom CSS contains `tailwind` directives that cannot be used with your current `plugins` configuration.'

Tailwind CSS is not correctly configured in your Nuxt project, or the `shadcn-nuxt` module's Tailwind integration is conflicting with an existing setup.

fix

Ensure Tailwind CSS is correctly installed and configured in your Nuxt project, including `postcss.config.js`. Verify that `shadcn-nuxt` is listed in your `modules` array. If you have a custom Tailwind configuration, check for conflicts with how `shadcn-nuxt` expects it to be set up. Consult the `shadcn-nuxt` documentation for specific Tailwind integration steps.

Upgrade

Version history

2.6.2latest on npm

Audit

Dependencies

nuxtrequiredPeer dependency for the module to integrate with the Nuxt.js framework.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/unovue/shadcn-vue ↗

packagehttps://www.npmjs.com/package/shadcn-nuxt ↗