使用 Nuxt 快速初始化 shadcn-vue 项目

更多 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>