Vue.js: UI Component Libraries

<!-- ✅ The 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'
    })
  ]
})

First render: an outlined "Default" button, a large blue "Primary" button and a red "Delete" button; below them a card titled "Order #1024" with the total and a small blue button, and the hint "Waiting for input".
Click "Delete": the button greys out and shows "⏳ Delete" (disabled while loading) and the hint becomes "Deleting…"; about 800ms later it is clickable again and the hint reads "Deleted (request simulated)".
The same type / size / loading / disabled props plus slots produce 4 different looks — exactly the essence of libraries like Element Plus: components with one visual language and one API.

// 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;      // larger 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;
}

/* 1. CSS variables (recommended) */
:root { --el-color-primary: #42b883; }

/* 2. SCSS variables (deep customization) */
@forward 'var.scss' with ($colors: ...);

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

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

/* 5. Runtime switching */
document.documentElement.classList.toggle('dark')

Compiled as-is, this stylesheet repaints every Element Plus component — the primary color turns Vue green, and toggling the dark class on <html> flips the background to #1a1a1a:

Before: primary #409eff, background #ffffff
After:  primary #42b883, background #1a1a1a (when <html class="dark">)

<!-- Usage: one table in 3 lines -->
<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,  // install icon sets automatically
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
      }
    })
  ]
})

The block renders as a four-column comparison table covering all five libraries:

Library           ⭐     Bundle size  Style
----------------  ----  -----------  --------------
Element Plus      24k   Medium       Desktop
Naive UI          16k   Small        Modern
Vuetify           40k   Large        Material
PrimeVue          11k   Medium       Multi-style
Ant Design Vue    20k   Medium       Ant Design

<!-- Requires Vite + npm install element-plus -->
<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>

With Element Plus installed, each tag renders as its styled Element Plus widget (a primary button, a form container, a striped table, a modal dialog, and a top toast):

[ Button ]      ← <el-button>
< el-form >     ← form container, label width applied
┌──────────────┐
│ Table header │ ← <el-table>
└──────────────┘
┌ Dialog ──────┐ ← <el-dialog> (hidden until v-model="visible")
└──────────────┘
✓ Saved!        ← <el-message> (auto-dismiss toast)

The block renders as a two-column table ordered from the largest collection to the smallest:

Library         Icons
--------------  ---------
Iconify         200,000+
Element Icons   300+
Material        2,000+
Font Awesome    7,000+
Heroicons       300+

The block renders as a five-row troubleshooting table covering bundle size, theming, icons, types and locales:

Error                          Symptom            Solution
-----------------------------  -----------------  ------------------------------
Full import bloats the bundle  bundle 500KB       unplugin-vue-components
Theme color will not change    SCSS was used      Switch to CSS variables
Icons do not appear            Font load failed   Use unplugin-icons SVG
TS type errors                 import has no types Install the @types package
i18n stops working             Wrong locale       Configure i18n