Nuxt 4 项目中引入 Element Plus CSS 插件方式

在 Nuxt 4 + Vue 3 项目中，如果想全局使用 Element Plus（Element UI Vue 3 版本）的组件和样式，可以通过插件方式引入 CSS，方便统一管理并保证 SSR 支持。

1️⃣ 安装 Element Plus

pnpm add element-plus

2️⃣ 创建 Nuxt 插件

在项目目录下创建插件文件：

app/plugins/element-plus.ts

内容如下：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus)
})

• import 'element-plus/dist/index.css'：引入 Element Plus 全局样式。
• nuxtApp.vueApp.use(ElementPlus)：注册 Element Plus 组件库到 Vue 应用。

Nuxt 4 默认会自动加载 app/plugins 下的插件文件，所以无需在 nuxt.config.ts 手动注册。

3️⃣ 使用示例

在组件中即可直接使用 Element Plus 组件：

<template>
  <el-button type="primary">点击我</el-button>
</template>

无需单独引入 CSS 或组件，插件已全局注册。

✅ 总结

• 插件方式引入 Element Plus CSS 简单方便，适合全局使用。
• 支持服务端渲染（SSR）和客户端渲染。