【Nuxt】在 Nuxt3 中使用 Element Plus

Nuxt3中集成ElementPlus的快速指南

原创

已于 2023-12-18 13:50:05 修改 · 3.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#SSR #Nuxt #Element Plus #前端

于 2023-11-06 09:02:25 首次发布

本文详细介绍了如何在Nuxt3项目中安装ElementPlus库，配置nuxt.config.ts，以及在.vue文件中导入和使用ElementPlus组件，包括引入icons-vue模块的步骤。

一、安装库

pnpm add element-plus --save
pnpm add @element-plus/icons-vue

二、安装 Nuxt Element Plus 模块

pnpm add @element-plus/nuxt -D

三、配置

在 nuxt.config.ts 中配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
   
   
  devtools: {
   
    enabled: true },
  typescript: {
   
   
    shim: false,
  },
  modules: ['@element-plus/nuxt'],
  css:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力挣钱的小鑫

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

nuxt3中使用element-plus（集成element-plus）

weixin_44646763的博客

12-28

972

nuxt3中使用element-plus（集成element-plus）

nuxt3+Element Plus项目搭建过程记录

Liu

05-28

1473

nuxt3 + ElementPlus项目搭建过程记录

参与评论您还未登录，请先登录后发表或查看评论

nuxt3导入element-plus组件库和图标使用

知识共享

05-12

2268

需要在Home 前面加上ElIcon。

前端：Nuxt3 + Vuetify3 + Element Plus + 添加常用插件

一些平时在开发过程中遇到的常见问题，分享给大家

06-24

4413

前端：Nuxt3 + Vuetify3 + Element Plus + 添加常用插件(sass + autprefixer + tailwindcss + pinia + pinis-plugin-persiste + nuxt-icons + perttier + eslint + 国际化)

Nuxt3项目集成Element Plus

lxRime的博客

05-31

943

element-plus/nuxt 是官网的解决方案，具体可查。

精选资源

vue3+tailwindcss+elementPlus+nuxt3

02-12

将这些技术整合在一起，Vue 3+Tailwind CSS+Element Plus+Nuxt 3的组合为开发者提供了一套强大的前端开发解决方案。开发者可以利用Vue 3的高效和灵活性，结合Nuxt 3在服务器端渲染上的优势，构建出高性能的Web应用。...

Nuxt3中使用 element-plus和pinia

weixin_46468143的博客

04-27

856

 2.在 store/counter.ts 中使用defineStore函数来定义 store 对象。 1.在store文件夹中定义一个模块，比如： store/counter.js。参考：https://nuxt.com/modules/element-plus。 3.在组件中使用定义好的 store对象。

【Nuxt实战】在Nuxt3项目中如何按需引入Element-plus

向梦想前进

09-01

3009

在nuxt3中按需引入element组件库

16 nuxt3学习（状态管理集成element plus）

yunbabac的博客

03-08

867

Nuxt跨页面、跨组件全局状态共享可使用 useState（支持Server和Client ）TT。

Nuxt3引入Element-plus和sass

键指江湖的博客

07-08

1527

或者命令行cd到项目文件运行npm install @element-plus/nuxt。或者命令行cd到项目文件运行npm install sass --save-dev。打开编辑器终端运行npm install @element-plus/nuxt。打开编辑器终端运行npm install sass --save-dev。在nuxt.config.ts文件添加代码。package.json文件会出现。package.json文件会出现。

Nuxt3+Element Plus完美使用el变量和暗黑模式

qq_28368745的博客

04-07

260

Nuxt3+Element Plus完美使用el变量和暗黑模式

nuxt学习之-element-plus安装到项目中

最新发布

weixin_47817450的博客

07-01

640

4、配置到项目中，在nuxt.config.ts。1、安装element依赖包。3、安装nuxt集成。

Nuxt使用@element-plus/icons-vue

IICOOM的博客

04-03

2917

Element Plus 的图标使用和Element UI的略有区别，需要单独引入。

nuxt3集成axios与element-plus（element-ui）

TOTOcbz的博客

11-28

3316

nuxt3集成axios element-ui

Nuxt3 安装element plus, Hydration completed but contains mismatches报错,Failed to resolve component警告，解决

m0_67755668的博客

08-15

1318

Nuxt3 安装element plus，Hydration completed but contains mismatches报错，警告，页面中使用element plus 组件需要在组件外包一层

Nuxt3项目创建(Nuxt3 + Vite +Ts + Pinia + Element-plus + Tailwindcss + NuxtIcon + Vueuse)

wangwei_1995的博客

07-04

3887

nuxt3项目基本搭建，新手推荐

Nuxt3 使用 ElementUI Plus报错问题

LQS000的博客

03-13

489

【代码】Nuxt3 使用 ElementUI Plus报错问题。

Nuxt + Pinia + Element Plus 后台管理系统搭建教程（含源码）

Jinxiansen0211的博客

06-11

841

技术栈作用Nuxt 3页面结构 + SSR + 中间件Pinia用户登录信息和状态管理后台页面 UI 构建Middleware登录校验、权限控制。

vite+ts+elementPlus+tailwindcss+nuxt3项目的搭建与配置

m0_56245485的博客

04-16

841

关于vite+ts+elementPlus+tailwindcss+nuxt3项目的搭建与配置

nuxt3 使用element plus

09-12

Nuxt.js 3.x版本是一个基于Vue.js的框架，用于构建服务器端渲染（SSR）、客户端渲染（CSR）和 Progressive Web App (PWA) 的现代Web应用。Element Plus是Element UI的一个增强版，它提供了一套响应式的、轻量级的Vue组件库。要在Nuxt 3中集成Element Plus，你需要做以下几个步骤： 1. **安装依赖**： ``` npm install @nuxtjs/composition-api npm install element-plus vue@next ``` `@nuxtjs/composition-api`是Nuxt 3推荐的API访问方式，而`vue@next`是为了匹配Element Plus的版本。 2. **配置Nuxt.config.js**： ```javascript import { defineNuxtConfig } from '@nuxtjs/composition-api' export default defineNuxtConfig({ buildModules: ['@nuxtjs/composition-api'], plugins: [ { src: '~/plugins/element-plus', ssr: true }, // 如果你想在服务端也加载Element Plus ], components: { '/': 'App', }, app: { config: { imports: { ElementPlus: () => import('element-plus') } } } }) ``` 3. **引入并使用Element Plus组件**：在`.vue`文件中，你可以像使用Vue官方组件一样导入和使用Element Plus组件： ```html <template> <el-container> <el-header>Header</el-header> <el-main>Main Content</el-main> <el-footer>Footer</el-footer> </el-container> </template> <script setup lang="ts"> import { ref } from 'vue' import { ElContainer, ElHeader, ElMain, ElFooter } from 'element-plus' const app = ref(null) </script> ```