Nuxt3（RC版）にElementPlusをインストールする

※執筆当時のNuxt3バージョンはRC10のため、正式リリース後は変わる可能性があります

Nuxt3プロジェクトを作成

• 公式リファレンスに従ってNuxt3プロジェクトを作成します
  https://v3.nuxtjs.org/getting-started/installation

npx nuxi init nuxt-app
cd nuxt-app
npm install

ElementPlusを導入

ElementPlusのインストール

npm install element-plus sass

プラグインのインストール

ElementPlusによると、Vue3では以下のように導入するようです。
https://element-plus.org/en-US/guide/quickstart.html

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Nuxt3ではcreateAppをしないので、プラグインとしてロードします
参考：https://v3.nuxtjs.org/guide/directory-structure/plugins/#vue-plugins

element-plus.client.ts

import { defineNuxtPlugin } from 'nuxt/app';
import ElementPlus from 'element-plus';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus);
});

import ElementPlus from 'element-plus';でプラグインモジュールをインポートし、nuxtApp.vueApp.useでインストールします。

型の適用

tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

CSSの読み込み

@use "element-plus/dist/index.css";

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/css/index.scss'],
});

動作確認

App.vueを修正

App.vue

<template>
  <div style="padding: 20px">
    <el-button @click="onClick">test</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';

const onClick = () => {
  ElMessage({ message: 'test' })
}
</script>

起動

npm run dev -- -o

アクセス

以下のようにElementPlusのボタンが表示され、押下時にメッセージが表示されました。