Element Plus を Vue 3 + Vite + TypeScript で使う手順

この記事では、Vue 3 + Vite + TypeScript 環境において、最新の UI コンポーネントライブラリ「Element Plus」を導入する手順を詳しく解説します。自動インポート設定によって開発効率を向上させる方法もご紹介します。

Element Plus のインストール

まずは Element Plus をプロジェクトに追加します。

npm install element-plus

yarn を使用している場合は以下でインストールできます。

yarn add element-plus

自動インポートの設定

Vite + Vue 3 + TypeScript 環境では、自動インポートを設定することで開発効率が大幅に向上します。

依存パッケージの追加

npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts の設定

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

使用例（モーダル）

実際に Element Plus を使ったシンプルなモーダル表示のサンプルです。

<template>
  <el-button @click="dialogVisible = true">モーダルを開く</el-button>
  <el-dialog v-model="dialogVisible" title="Element Plus モーダル">
    <p>これはモーダルの内容です</p>
    <template #footer>
      <el-button @click="dialogVisible = false">閉じる</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
</script>

動作確認

npm run dev で開発サーバーを起動し、モーダルが正常に表示されれば導入成功です。

注意点

Element Plus は Vue 3 専用です（Vue 2 には対応していません）。
CSS の自動インポート設定をしていれば、明示的に element-plus/dist/index.css を読み込む必要はありません。
自動インポートを使わない場合は、各コンポーネントを手動でインポートする必要があります。

さいごにまとめ

Vue 3 + Vite + TypeScript 環境での Element Plus 導入は、公式の自動インポート機能を利用することで非常にスムーズに行えます。

自動インポートを設定すれば、コードの記述量が減り、保守性も向上。
TypeScript にも対応しているため、型安全な開発が可能。
UI コンポーネントをすぐに利用でき、開発スピードが大幅アップ。

この機会に、Element Plus をプロジェクトに取り入れてみてはいかがでしょうか？