The icon usage of Element Plus is slightly different from that of Element UI, and needs to be installed separately .
In nuxt3, you may not be able to load icons directly like the official website of Element Plus:
// main.ts
// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
Nuxt3 encapsulates the vue app instance, we can use the combined method useNuxtApp to get the vue app:
<template>
<div>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</div>
</template>
<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// You might choose this based on an API call or logged-in status
const layout = "main-content";
const nuxtApp = useNuxtApp()
// console.log(nuxtApp)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
nuxtApp.vueApp.component(key, component)
}
</script>
This way you can use the icon normally:
<el-icon class="el-icon-close"><Close @click="handleClose"/></el-icon>