更多 shadcn-vue 中文文档在 Torna
Nuxt
安装并配置Nuxt
1. 创建项目
首先，使用 create-nuxt-app 创建一个新的 Nuxt 项目。
如果你选择使用
JavaScript模板，那么必须存在 jsconfig.json 文件，这样命令行工具（CLI）才能正常运行。
npx nuxi@latest init my-app
2. 下载 TypeScript
如果你遇到报错 ERROR: Cannot read properties of undefined (reading 'sys') (x4)，根据该报错的反馈，你应该安装 TypeScript 作为依赖项。
npm install -D typescript
3. 下载 Tailwind 模块
npx nuxi@latest module add @nuxtjs/tailwindcss
4. 添加 Nuxt 模块
shadcn-nuxt - 通过下方命令行自动下载
npx nuxi@latest module add shadcn-nuxt
shadcn-nuxt - 手动下载，添加下方代码至 modules/shadcn.ts 文件
import {defineNuxtModule,addComponent,addComponentsDir,tryResolveModule,
} from 'nuxt/kit';export interface ShadcnVueOptions {/*** Prefix for all the imported component*/prefix: string;/*** Directory that the component lives in.* @default "~/components/ui"*/componentDir: string;
}export default defineNuxtModule<ShadcnVueOptions>({defaults: {prefix: 'Ui',componentDir: '~/components/ui',},meta: {name: 'ShadcnVue',configKey: 'shadcn',version: '0.0.1',compatibility: {nuxt: '>=3.9.0',bridge: false,},},async setup({ componentDir, prefix }) {const veeValidate = await tryResolveModule('vee-validate');const vaulVue = await tryResolveModule('vaul-vue');addComponentsDir({path: componentDir,extensions: ['.vue'],prefix,pathPrefix: false,},{prepend: true,});if (veeValidate !== undefined) {addComponent({filePath: 'vee-validate',export: 'Form',name: `${prefix}Form`,priority: 999,});addComponent({filePath: 'vee-validate',export: 'Field',name: `${prefix}FormField`,priority: 999,});}if(vaulVue !== undefined) {['DrawerPortal', 'DrawerTrigger', 'DrawerClose'].forEach((item) => {addComponent({filePath: 'vaul-vue',export: item,name: prefix + item,priority: 999,});})}addComponent({filePath: 'radix-vue',export: 'PaginationRoot',name: `${prefix}Pagination`,priority: 999,});addComponent({filePath: 'radix-vue',export: 'PaginationList',name: `${prefix}PaginationList`,priority: 999,});addComponent({filePath: 'radix-vue',export: 'PaginationListItem',name: `${prefix}PaginationListItem`,priority: 999,});},
});declare module '@nuxt/schema' {interface NuxtConfig {shadcn?: ShadcnVueOptions;}interface NuxtOptions {shadcn?: ShadcnVueOptions;}
}
5. 配置 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'}
})
6. 运行命令行工具（CLI）
运行 shadcn-vue 初始化命令开始你的项目：
npx shadcn-vue@latest init
7. 配置 components.json
在此，您将被询问几个问题，以配置 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
8. 应用结构
以下是 Nuxt 应用程序的默认项目结构，可供参考：
.
├── 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
- UI 组件放置在
components/ui文件夹中 - 其他组件，例如 和 ，放置在
components文件夹中 lib文件夹包含所有的工具函数utils.ts中定义了 cn 辅助函数assets/css文件夹包含全局 CSS
9. 开始使用
你现在可以开始添加 shadcn-vue 组件到你的项目中去。
npx shadcn-vue@latest add button
这条命令将添加 Button 组件到你的项目中去。Nuxt 将会自动处理组件的导入，你只需像这样使用它：
<template><div><Button>Click me</Button></div>
</template>