Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use [email protected].

Create project

Start by creating a new Nuxt project using create-nuxt-app:

pnpm create nuxt@latest

If you encounter the error ERROR: Cannot read properties of undefined (reading 'sys') (x4), please proceed to install TypeScript as a dependency, as advised in this issue

pnpm add -D typescript

Add Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

Replace everything in assets/css/tailwind.css with the following:

assets/css/tailwind.css

@import "tailwindcss";

Update nuxt.config.ts with the following:

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  // ...
  css: ['~/assets/css/tailwind.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

Add Nuxt module

Due to Nuxt auto-import feature, if you skip this step you will observe many warning in console.

Install the package below.

pnpm dlx nuxi@latest module add shadcn-nuxt

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

Run Nuxt Prepare

If you are initiating a new project, you need to run the command so that Nuxt generates the necessary .nuxt folder:

pnpm dlx nuxi prepare

Run the CLI

Run the shadcn-vue init command to setup your project:

pnpm dlx shadcn-vue@latest init

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Add Components

You can now start adding components to your project.

pnpm dlx shadcn-vue@latest add button

The command above will add the Button component to your project. Nuxt autoImport will handle importing the components, you can just use it as such:

<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>