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

1、安装依赖

npm install element-plus
npm install @element-plus/icons-vue

2、配置

1、在plugins目录下新建 element-plus.client.ts，如果没有plugins目录，先在根目录下新建plugins目录

2、element-plus.client.ts 文件里注册组件

import * as ElementPlus from 'element-plus/dist/index.full'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus, {
    locale: zhCn,
  })
})

3、在nuxt.config.ts中配置element-plus全局的css文件

export default defineNuxtConfig({
  css:[
    'element-plus/dist/index.css',
  ],
})

以上就完成了在Nuxt3中element plus 的安全和配置。

3、注意

以下是在Nuxt3 中使用element plus的一些注意点

1、使用 element plus 的图标需要单独引入，例如

import { Lock, User, Key } from '@element-plus/icons-vue'

2、Hydration completed but contains mismatches报错，Failed to resolve component警告，页面中使用element plus 组件需要在组件外包一层<client-only>，例如：

<template>
    <div>
        <client-only>
            <el-button @click="getMore">调用</el-button>
        </client-only>
    </div>
</template>