shadcn-nuxt

Shadcn Nuxt

Shadcn Vue module for Nuxt.

•  Release Notes

•  Documentation

Features

• Auto-import correct and relevant components
• more to come...

Quick Setup

1. Add shadcn-nuxt dependency to your project

# Using pnpm
pnpm add -D shadcn-nuxt

# Using yarn
yarn add --dev shadcn-nuxt

# Using npm
npm install --save-dev shadcn-nuxt

1. Add shadcn-nuxt to the modules section of nuxt.config.ts

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'
  }
})

That's it! You can now use Shadcn Nuxt in your Nuxt app

Multiple component directories

Projects that split their base UI components from custom extensions can configure multiple directories, each with its own optional prefix:

export default defineNuxtConfig({
  modules: ['shadcn-nuxt'],
  shadcn: {
    prefix: 'Ui',
    componentDir: [
      '@/components/ui',
      {
        path: '@/components/ai',
        prefix: 'Ai',
      },
    ],
  },
})

Each directory is ignored by Nuxt's default auto-import scanning and re-registered through the module, ensuring clean separation without console warnings. See issue #1593 for the background.

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release