# @element-plus/nuxt 中文文档

规范地址：https://npmcn.com/package/%40element-plus/nuxt/

版本：1\.1\.5
npm 元数据更新时间：2026-02-05T03:16:15.685Z
中文译文更新时间：2026-11-13T11:58:43.497Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40element-plus/nuxt
原文对照：https://npmcn.com/package/%40element-plus/nuxt/?lang=original
项目主页：https://github.com/element-plus/element-plus-nuxt#readme
源码仓库：https://github.com/element-plus/element-plus-nuxt

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：45.7 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@element-plus/icons-vue \>=0\.2\.6，element-plus \>=2
- 首次发布：2023-01-04T14:52:46.105Z
- 最新版本发布：2026-02-05T03:16:15.353Z
- 近 30 天下载量：82445（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 1 个）

## 中文简介

Nuxt 元素加模块

## 安装

```sh
npm install @element-plus/nuxt
```

也可以使用：`pnpm add @element-plus/nuxt`、`yarn add @element-plus/nuxt`、`bun add @element-plus/nuxt`

## README

![](https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png)

 [![](https://img.shields.io/npm/v/@element-plus/nuxt.svg)](https://www.npmjs.com/package/@element-plus/nuxt)[![](https://img.shields.io/npm/dm/@element-plus/nuxt.svg)](https://npmcharts.com/compare/@element-plus/nuxt?minimal=true)

# 元素加纳克特

> [元素加号](https://element-plus.org/) 模块 [坚果](https://nuxt.com/)

## 特征

-   按需自动导入组件和样式 .
-   按需自动导入指令和样式 .
-   自动导入图标 [@element-plus/icons-vue](https://github.com/element-plus/element-plus-icons)。 。 。 .
-   自动导入 ElMessage, El Notification等方法.
-   自动将ID INJECTION KEY和ZINDEQINJECTION KEY注入Vue.
-   自动将 Teleport 标记输入到 HTML 页面的正确位置.

## 安装

> \[尖叫声\] 自从 [日数](https://github.com/iamkun/dayjs) 由元素加在内部使用不是 [JavaScript 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules),为了保证在启动前将其转换为JavaScript模块,您需要添加一个 `.npmrc` 文件到工程的根目录并添加以下配置:
> 
> ```
> shamefully-hoist=true
> node-linker=hoisted
> ```
> 
> 或者安装 `dayjs` 独立依赖.

```bash
npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D
```

## 配置

> \[尖叫声\] 目前,该方法不能自动获得上下文,您需要手动配置 [安装方法](https://npmcn.com/package/%40element-plus/nuxt/#readme-installmethods) 在选项中.

```ts
export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})
```

## 使用量

```vue
<template>
  <el-button @click="ElMessage('hello')">button</el-button>
  <ElButton :icon="ElIconEditPen" type="success">button</ElButton>
  <LazyElButton type="warning">lazy button</LazyElButton>
</template>
```

参考文献 [Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/components) 财务报告和审定财务报表 [游乐场](https://npmcn.com/package/%40element-plus/nuxt/playground/app.vue) 使用时.

## 选项

### 导入样式

-   类型 : `'css' | 'scss' | boolean`
-   默认 : `css`

导入带有组件的样式 cs 或 sass( scs), 禁用自动导入样式 `false`。 。 。 .

### 主题

-   类型 : `array`

自动需要导入样式的主题列表 .

譬如说. `['dark']`

### 图标

-   类型 : `string | false`
-   默认 : `ElIcon`

图标前缀名称, 禁用自动导入图标 `false`。 。 。 .

### 安装方法

-   类型 : `array`

需要安装的方法清单.

譬如说. `['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']`

### 命名空间

-   类型 : `string`
-   默认 : `el`

当您改变全球命名空间时, 您也必须在这里更改它 .

### 默认本地

-   类型 : `string`

替换默认区域, 您可以找到区域列表 [这里](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)

譬如说. `'zh-cn'`

### 缓存

-   类型 : `boolean`
-   默认 : `false`

是否缓存元素加组件和指令 . **只在开发模式中有效**。 。 。 .

如果您启用了此功能, 您将会在开发模式中获得更快的加载速度 .

### 主题

-   类型 : `object`

配置 SCSS 变量生成自定义主题 . **只有在 `importStyle` 实值 `scss`**。 。 。 .

譬如说.

```ts
{
  $colors: {
    primary: { base: 'rgba(107,33,168, 1)' }
  },
  dark: {
    $colors: {
      primary: { base: 'rgb(242, 216, 22)' }
    }
  }
}
```

### 全局配置

-   类型 : `object`

设置全局配置, 如修改默认 `size` 财务报告和审定财务报表 `z-index` 构成部分.

譬如说. `{ size: 'small', zIndex: 3000 }`

### 注射标识

-   类型 : `object`
-   默认 : `{ prefix: 1024, current: 0 }`

自动将 ID INJECTION KEY 输入 Vue .

### 注射 Zindex 数据

-   类型 : `object`
-   默认 : `{ current: 0 }`

自动将 Z INDEQINJECTION KEY 注入 Vue.

### 附录

-   类型 : `array`

当你修改 `append-to` 全部基于 ElTooltip 组件的道具, 您需要在此添加值 .

### 组件

-   类型 : `array`

如果有组件没有从 Element Plus 自动导入, 您需要在此添加组件名称 .

譬如说. `['ElSubMenu']`

### 子组件

-   类型 : `object`

子组件定义文件在其母组件中的组件映射.

### 指令

-   类型 : `object`

如果有指令不是自动从 Element Plus 导入, 您需要在此添加指令名称 .

### 进口

-   类型 : `array`

如果您想要从 Element Plus 中自动导入内容, 您可以在此添加 .

譬如说.

```ts
[
  ['useLocale', 'es/hooks/use-locale/index.mjs'],
  [['castArray', 'unique'], 'es/utils/arrays.mjs']
],
```

### 基础导入

-   类型 : `array`

是否禁用自动导入将导入的列表 .

### 无样式组件

-   类型 : `array`

当组件错误地加载样式时,需要在此添加组件名称.

### 包含

-   类型 : `array`
-   默认 : `[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]`

包含需要自动导入样式的文件 .

### 排除

-   类型 : `array`
-   默认 : `[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]`

不包括不需要自动导入样式的文件.

## 模板

[元素加- nuxt 启动器](https://github.com/element-plus/element-plus-nuxt-starter)

## 发展

-   运行 `pnpm i` 以安装依赖.
-   运行 `pnpm dev:prepare` 生成类型根.
-   运行 `pnpm dev` 在开发模式中开始操场.
-   运行 `pnpm dev:build` 建造游乐场.
-   运行 `pnpm dev:start` 到本地预览游乐场.
-   运行 `pnpm build` 建造这个项目.

## 常见问题

### @element-plus/nuxt 是什么？

Nuxt 元素加模块

### 如何安装 @element-plus/nuxt？

在项目目录运行 npm install @element-plus/nuxt，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@element-plus/icons-vue（\>=0\.2\.6）、element-plus（\>=2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @element-plus/nuxt 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @element-plus/nuxt 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @element-plus/nuxt 可以商用吗？

@element-plus/nuxt 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @element-plus/nuxt 的下载量有多少？

根据 npm 官方下载统计，@element-plus/nuxt 在 2026/10/14 – 2026/11/12 这 30 天内被下载 82,445 次，日均约 2,748 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @element-plus/nuxt 还在维护吗？

最新版本 1\.1\.5 发布于 2026/02/05（9 个月前）；至今共发布 17 个版本，其中过去 12 个月发布了 1 个；首次发布于 2023/01/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。