Create project

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

If you're using the JS template, jsconfig.json must exist for the CLI to run without errors.

npx nuxi@latest init my-app

Install TypeScript

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

npm install -D typescript

Install TailwindCSS module

npx nuxi@latest module add @nuxtjs/tailwindcss

Alternatively, you can manually add @nuxtjs/tailwindcss using your dependency manager

npm install --save-dev @nuxtjs/tailwindcss

and then to the modules section of nuxt.config.{ts,js}

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

Add Nuxt module

Install the package below.

npx 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 the CLI

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

npx shadcn-vue@latest init

Configure components.json

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

Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Write configuration to components.json. Proceed? > Y/n

App structure

Here's the default structure of Nuxt app. You can use this as a reference:

.
├── pages
│   ├── index.vue
│   └── dashboard.vue
├── components
│   ├── ui
│   │   ├── alert-dialog
│   │   │   ├── AlertDialog.vue
│   │   │   └── ...
│   │   ├── button
│   │   │   ├── Button.vue
│   │   │   └── ...
│   │   ├── dropdown-menu
│   │   │   ├── Dropdown.vue
│   │   │   └── ...
│   │   └── ...
│   ├── MainNav.vue
│   ├── PageHeader.vue
│   └── ...
├── lib
│   └── utils.ts
├── assets
│   ├── css
│   │   └── tailwind.css
├── app.vue
├── nuxt.config.ts
├── package.json
├── tailwind.config.js
└── tsconfig.json

• I place the UI components in the components/ui folder.
• The rest of the components such as <PageHeader /> and <MainNav /> are placed in the components folder.
• The lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.
• The assets/css folder contains the global CSS.

That's it

You can now start adding components to your project.

npx 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>