在nuxt3中同时使用PrimeVue和TailwindCSS

年后先把驾照考了，每天在家附近学车，上午练完车之后也没什么事做。正好看看以前没用过的技术和框架，鼓捣一些小玩意儿。

第一眼看到PrimeVue时就有些欢喜，这UI界面比过去项目里用的ElementUI更好看，组件数量和场景覆盖更全面，首页展示的几个应用场景UI（仪表盘、IM工具、在线邮箱、表单交互、CRM、影视网站）着实有让人重复造轮子的冲动。

UI样式有点好看

之前开发公司官网时用过nuxt（因为当时需要考虑网站页面的SEO需求，CSR直接Pass，做SSG公司又接受不了每次更新内容要发布网站，最后只能用nuxt上SSR），现在一年多过去之后nuxt都更新到v3.15了，我也正好体验一下新版本。

感觉Nuxt就像PHP里的ThinkPHP框架，约定大于配置，使用足够方便

01、安装PrimeVue

在Nuxt的Modules中能找到PrimeVue应用，安装只需要完成以下步骤：

1. 在命令行中运行安装命令；

1
2
3
4
5

# 安装自带主题
npm install primevue @primeuix/themes

# 安装PrimeVue
npm install --save-dev @primevue/nuxt-module

2. 在nuxt.config.ts中添加配置；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// ① 引用自带的主题配置
import Aura from '@primeuix/themes/aura';

export default defineNuxtConfig({
  // ...

  // ② 添加modules名称
  modules: [
    '@primevue/nuxt-module',
  ],

  // ③ 添加配置，参考 https://primevue.org/nuxt/#configuration
  primevue: {
    usePrimeVue: true,
    autoImport: true,
    options: {
      ripple: true,
      inputVariant: 'filled',
      theme: {
        preset: Aura,
        options: {
          darkModeSelector: 'system',
          cssLayer: false
        }
      }
    }
  }
})

3. 在页面中添加一个按钮组件，验证效果；

1

<Button label="Verify" />

4. 出现下图效果，则表示已经成功引用PrimeVue。

02、安装TailwindCSS

在官网的Demo里能够使用TailwindCSS的样式类

最初我以为安装PrimeVue后会自动引入TailwindCSS，结果发现并不是这样，仍需要手动引用Tailwind，而正巧Nuxt商店里也有Tailwind应用，需要执行以下命令：

1
2
3
4
5
6
7
8
9
10

# 安装tailwindcss-primeui
npm i tailwindcss-primeui

# 安装tailwind
npx nuxi@latest module add tailwindcss

# 生成tailwind.config.ts（推荐）
npx tailwindcss init --ts
# or 生成tailwind.config.js、postcss.config.js
npx tailwindcss init -p

然后在tailwind.config.ts中添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import type { Config } from 'tailwindcss'

// 引用PrimeUI
import PrimeUI from "tailwindcss-primeui";

export default {
  content: [],
  theme: {
    extend: {},
  },

  // 添加plugins、darkMode配置项
  plugins: [PrimeUI],
  darkMode: ["class", ".p-dark"]
  
} satisfies Config

参考自：https://tailwind.primevue.org/nuxt/#tailwind-config、ChatGPT。

附1：为什么要安装tailwindcss-primeui？

在官方文档的Tailwind章节中有解释，大致意思是在引用Tailwind CSS后，它可以保持组件原本的样式和色彩。

The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. bg-primary, text-surface-500, text-muted-color.

tailwindcss-primei是PrimeTek的官方插件，用于在PrimeVue和Tailwind CSS等Prime UI库之间提供一流的集成。它设计用于在样式和非样式模式下工作。例如，在样式模式下，语义颜色（如原色和表面）作为Tailwind实用程序提供，如bg-primary, text-surface-500, text-muted-color。

附2：为什么不把Tailwind配置放在nuxt.config.ts中？

官方示例项目

在PrimeVue的官方例子里，确实将plugins、darkMode属性放在了nuxt.config.ts的tailwindcss.config配置项里，并且这也能正常运行和使用Tailwind和PrimeVue，但在nuxt运行时会弹出一段警告内容：

所以，直到我将配置项单独移至tailwind.config.ts后，运行项目才不会遇到这个警告提示。

不得不说这挺难找的，有些文档都没及时更新