Nuxt3 rc.11 填坑 配置 element-plus

网上各种版本都有，就是都不太行，不太完整。

先看下package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.11",
    "sass": "^1.49.8",
    "sass-loader": "^12.6.0",
    "unplugin-auto-import": "^0.10.3",
    "unplugin-icons": "^0.13.2",
    "unplugin-vue-components": "^0.22.8"
  },
  "dependencies": {
    "element-plus": "^2.2.17"
  }
}

tsconfig.json

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

nuxt.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver";
const lifecycle = process.env.npm_lifecycle_event;
export default defineNuxtConfig({
    vite: {
        plugins: [
            AutoImport({
                resolvers: [
                    ElementPlusResolver(
                    ),
                    IconsResolver()]
            }),
            Components({
                dts: true,
                resolvers: [ElementPlusResolver(
                    {
                        importStyle: false
                    }
                )]
            }),
        ],
    },
    components: true,
    css: ["~/assets/scss/index.scss"],
    transpile: ["element-plus"],
    build: {
        transpile: lifecycle === "build" ? ["element-plus"] : [],
    },
})

按照上面的配置在代码中就可以直接引用组件了，例如index.vue中的按钮

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert> This is an auto-imported component </AppAlert>
    <el-button>I am ElButton</el-button>

    <div>
      <el-radio-group v-model="radio1" size="large">
        <el-radio-button label="New York" />
        <el-radio-button label="Washington" />
        <el-radio-button label="Los Angeles" />
        <el-radio-button label="Chicago" />
      </el-radio-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const radio1 = ref('New York')
</script>
<style lang='scss' scoped>
</style>

这时候可能会报错如下

ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
usage: app.provide(ID_INJECTION_KEY, {
  prefix: number,
  current: number,
})
    at debugWarn (file:///E:/h5/vuestudy/vue3Study/nuxt-app/node_modules/element-plus/es/utils/error.mjs:15:37)
    at useId (file:///E:/h5/vuestudy/vue3Study/nuxt-app/node_modules/element-plus/es/hooks/use-id/index.mjs:16:5)
    at setup (file:///E:/h5/vuestudy/vue3Study/nuxt-app/node_modules/element-plus/es/components/radio/src/radio-group2.mjs:26:21)
    at callWithErrorHandling (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:157:22)
    at setupStatefulComponent (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7118:29)
    at setupComponent (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7073:11)
    at renderComponentVNode (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:172:17)
    at Module.ssrRenderComponent (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:612:12)
    at _sfc_ssrRender (E:/h5/vuestudy/vue3Study/nuxt-app/pages/index.vue:58:31)
    a

这是因为 在SSR下elementui需要配置一个provide

需要在 plugins文件夹下建立一个element-plus.ts

import { ID_INJECTION_KEY } from 'element-plus';

export default defineNuxtPlugin(nuxtApp => {
    // Doing something with nuxtApp
    nuxtApp.vueApp.provide(ID_INJECTION_KEY,{
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
  })

然后再进行重启服务 npm run dev，就可以运行正常了，控制台也不会有警告和错误了