Vue.js: UIコンポーネントライブラリ

<!-- ✅ Correct Version: Use Element Plus el-table -->
<template>
  <el-table :data="orders" stripe>
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="user" label="User" />
    <el-table-column prop="total" label="Total" :formatter="formatTotal" />
  </el-table>
</template>

<script setup>
import { ElTable, ElTableColumn } from 'element-plus'

const orders = ref([...])
function formatTotal(row) { return `$${row.total}` }
</script>

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

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

// vite.config.ts
import AutoImport from 'unplugin-auto-import'
import Components from 'unplugin-vue-components'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts'
    })
  ]
})

<el-button>Button</el-button>
<el-form>Form</el-form>
<el-table>Table</el-table>
<el-dialog>Dialog</el-dialog>
<el-message>Message</el-message>

button / form / table / dialog / message の 5 つが表示される
各コンポーネントはテーマ変数の色で描画される
el-message は呼び出し時に画面上部へトースト表示される

// src/styles/element-plus.scss
:root {
 --el-color-primary: #42b883; // Change the primary color to Vue Green
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  --el-border-radius-base: 8px;      // Increase Corner Radius
  --el-font-size-base: 14px;
}

// main.js
import './styles/element-plus.scss'
import 'element-plus/dist/index.css'

// src/styles/element-plus-vars.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': ('base': #42b883),
    'success': ('base': #67c23a),
    'warning': ('base': #e6a23c),
    'danger':  ('base': #f56c6c),
    'info':    ('base': #909399)
  )
);

// main.js
import './styles/element-plus-vars.scss'
import 'element-plus/dist/index.css'

// Dark Theme
:root {
  --el-color-primary: #42b883;
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

html.dark {
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

<!-- Usage：3 All set 1 A table -->
<BusinessTable :data="orders" :columns="orderColumns" :total="100" />

npm install -D unplugin-icons @iconify-json/carbon

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/dist/loader'

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'vue3',
      autoInstall: true,  // Automatically Install Icon Sets
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
      }
    })
  ]
})

// 1. CSS Variable
:root { --el-color-primary: #42b883; }

// 2. SCSS Variable
@forward 'var.scss' with ($colors: ...);

// 3. Dark Mode
:root.dark { --el-bg-color: #1a1a1a; }

// 4. Custom Themes
@import 'element-plus/theme-chalk/dark/css-vars.css';

// 5. Change Theme（Runtime）
document.documentElement.classList.toggle('dark')

:root の --el-color-primary を #42b883 に変えるとボタンが緑になる
.dark クラスを付けると背景が #1a1a1a に切り替わる
実行時に classList.toggle で即座にテーマが入れ替わる

Default / Primary / Delete の 3 種類のボタンが並ぶ
Delete をクリックすると 800ms のローディング後、メッセージが「削除しました」に変わる
カードには「Order #1024」ヘッダーと 3 items, total ¥267 + Pay now ボタンが表示される