nuxt3中使用element-plus

1、使用@element-plus/nuxt

安装@element-plus/nuxt依赖

npm install -D @element-plus/nuxt

然后在nuxt.config.ts文件中引入

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

就可以在页面中引入element-plus组件了

<template>
    <div class="container">
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </div>
</template>

2、使用unplugin-element-plus 

来自 https://github.com/element-plus/element-plus-nuxt-starter 的示例

安装依赖

npm install element-plus --save
npm install unplugin-element-plus -D

在nuxt.config.ts文件中引入

import ElementPlus from 'unplugin-element-plus/vite'
export default defineNuxtConfig({
    css: ['element-plus/dist/index.css'],
    build: {
        transpile: ['element-plus/es'],
    },
    vite: {
        plugins: [
            ElementPlus()
        ],
    }
})

在plugins下新建一个element-plus.ts文件（在SSR下elementui需要配置一个provide）

import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
})

在页面上引入使用

<script setup lang='ts'>
import {
    ElButton
} from "element-plus";
</script>

<template>
    <div>
        <el-button>Default</el-button>
    </div>
</template>