Create project

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

pnpm dlx nuxi@latest init my-app

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 and its configuration

Install @nuxtjs/tailwindcss module:

pnpm add --save-dev @nuxtjs/tailwindcss

Add the module to the modules section of nuxt.config.{ts,js}:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

Create tailwind.config.js with the template below:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add this import header in your main css file, assets/css/tailwind.css in our case:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ... */

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: ['@nuxtjs/tailwindcss', '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

Configure components.json

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

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

That's it

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>