注释: 以下指南适用于 Tailwind v4。如果使用 Tailwind v3，请使用 shadcn-vue@1.0.3。

创建项目

开始使用 create-nuxt-app 创建一个新的 Nuxt 项目：

pnpm create nuxt@latest

如果遇到错误 ERROR: Cannot read properties of undefined (reading 'sys') (x4)，请按照此 issue 的建议，作为依赖安装 TypeScript。

pnpm add -D typescript

添加 Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

或者安装 @nuxtjs/tailwindcss@7.0.0-beta.1 或更新版本

pnpm add tailwindcss @nuxtjs/tailwindcss@7.0.0-beta.1

对于 Nuxt v4: app/assets/css/tailwind.css
对于 Nuxt v3: assets/css/tailwind.css

将 tailwind.css 中的所有内容替换为以下内容：

@import "tailwindcss";

将 nuxt.config.ts 更新为以下内容：

import tailwindcss from '@tailwindcss/vite'

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

添加 Nuxt 模块

跳过此步骤会因为 Nuxt 的自动导入特性而触发大量控制台警告。

安装下面的包。

pnpm dlx nuxi@latest module add shadcn-nuxt

为 ssrWidth 添加 Nuxt 插件

某些组件需要通过 VueUse 设置 ssrWidth，以避免移动设备上的 Hydration 错误。

向你的 Nuxt 应用添加以下插件：
对于 Nuxt v4: app/plugins/ssr-width.ts
对于 Nuxt v3: plugins/ssr-width.ts

了解更多关于 useSSRWidth 的信息。

import { provideSSRWidth } from '@vueuse/core'

export default defineNuxtPlugin((nuxtApp) => {
  provideSSRWidth(1024, nuxtApp.vueApp)
})

配置 nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: ['shadcn-nuxt'],
  shadcn: {
    /**
     * 所有导入组件的前缀
     */
    prefix: '',
    /**
     * 组件所在目录
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
})

运行 Nuxt Prepare

如果你正在启动一个新项目，需要运行此命令以让 Nuxt 生成必要的 .nuxt 文件夹：

pnpm dlx nuxi prepare

运行 CLI

运行 shadcn-vue init 命令以设置你的项目：

pnpm dlx shadcn-vue@latest init

你将被问到一些关于 components.json 的问题。

你想使用哪种颜色作为基础颜色？ › Neutral

添加组件

现在你可以开始向项目添加组件了。

pnpm dlx shadcn-vue@latest add button

上述命令会将 Button 组件添加到你的项目中。Nuxt 自动导入将处理组件的导入，你只需像下面这样使用它即可：

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