UI Components Libraries

⚡️Top 6 Vue.js UI Libraries (Vue 3) Trending in 2024🔥

영어 중심 커뮤니티

• Vuetify : MUI 사양을 기반으로 하는 인기 있는 Vue.js UI 컴포넌트 라이브러리
• Quasar : MUI 컴포넌트와 다양한 스타일(bootstrap, material, font-awesome 등)의 아이콘
• PrimeVue

중국어 중심 커뮤니티

• Element Plus : 완전한 type 정의를 갖춘 TypeScript 기반 라이브러리.
  MUI를 기반으로 하지 않아 매우 쉽게 수정할 수 있는 고유한 UI 스타일
• Ant Design Vue : Ant Design을 기반으로 하는 인기 있는 TypeScript 기반 UI 컴포넌트 라이브러리.
  Element Plus와 유사하게 Antdv에는 고유한 UI 스타일.
• Naive UI : TypeScript 기반 UI 컴포넌트 라이브러리

Which is Better UI Component Libraries for Vue.js?
https://npmtrends.com/ant-design-vue-vs-element-plus-vs-naive-ui-vs-quasar-vs-vuetify

---

Tailwind

https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.css

@tailwind base; /* normalize */
@tailwind components; /* 컴포넌트 스타일 */
@tailwind utilities; /* 유틸리티 클래스 */

---

Vuetify

Vue Component Framework

yarn add vuetify

https://vuetifyjs.com/en/getting-started/installation/#existing-projects

import 'vuetify/styles' // 스타일
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components' // 컴포넌트
import * as directives from 'vuetify/directives' // 디렉티브

const vuetify = createVuetify({
  components,
  directives,
})
app.use(vuetify)

https://cdn.jsdelivr.net/npm/vuetify@3.7.2/lib/styles/main.css
스타일 : 유틸리티 + normalize

https://cdnjs.cloudflare.com/ajax/libs/vuetify/3.7.1/vuetify.css
스타일 : 유틸리티 + normalize + 컴포넌트(.v- 접두어)

https://vuetifyjs.com/en/components/all/

• Containment
  • Button, Card, List, Chip, Divider, Expansion panel, Menu, Dialog, Overlay, Toolbar, Tooltip
• Navigation
  • Pagination, Breadcrumbs, Tabs
• Form inputs and controls
  • Autocomplete, Combobox, Text field, Checkbox, Switch, Radio, File input, Form, Number input, Select, Slider, Range Slider, Textarea
• Selection
  • Carousel, Button group, Chip group, Stepper
• Data and display
  • Confirm edit, Data iterator, Data table, Infinite scroll, Table
• Feedback
  • Alert, Badge, Banner, Empty state, Skeleton, Snackbar, Progress circular, Progress linear
• Pickers
  • Date picker

https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/components/VBtn

<v-btn>
  Button
</v-btn>
🔽
<button type="button" class="v-btn ...">
  <span class="v-btn__content">Button</span>
</button>

---

Quasar

기업용 크로스 플랫폼 VueJs 프레임워크
https://quasar.dev/start/vite-plugin#installation

yarn add quasar @quasar/extras (extras: optional)
yarn add --dev @quasar/vite-plugin sass@^1.33.0 (sass: optional)

import { Quasar } from 'quasar';
import 'quasar/src/css/index.sass';
app.use(Quasar)

https://github.com/quasarframework/quasar/blob/dev/ui/src/css/index.sass
normalize + 유틸리티 + 컴포넌트

https://quasar.dev/vue-components/button

<q-btn label="Button" />
🔽
<button class="q-btn q-btn-item ..." type="button">
  <span class="q-btn__content">
    <span class="block">Button</span>
  </span>
</button>

---

Ant Design Vue

yarn add ant-design-vue

https://antdv.com/docs/vue/getting-started

1. 모든 컴포넌트 전역 등록

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
app.use(Antd)

reset css만 따로 import 하고 컴포넌트 별 스타일은 별도로 가짐.

2. 일부 컴포넌트 전역 등록

import { Button, message } from 'ant-design-vue';
app.use(Button)
app.config.globalProperties.$message = message;

https://antdv.com/components/overview

• General
  • Button
• Layout
  • Divider, Flex, Grid, Layout, Space
• Navigation
  • Anchor, Breadcrumb, Dropdown, Menu, Pagination, Steps
• Data Entry
  • AutoComplete, Cascader(selection box), Checkbox, DatePicker, Form, Input, InputNumber
  • Radio, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
• Data Display
  • Badge, Calendar, Carousel, Collapse, Empty, Popover, Segmented, Table, Tabs, Tag, Tooltip, Tree
• Feedback
  • Alert, Message, Modal, Notification, Popconfirm, Progress, Skeleton, Spin

https://github.com/vueComponent/ant-design-vue/tree/main/components/button

<a-button>Button</a-button>
🔽
<button class="ant-btn ant-btn-default" type="button">
  <span>Button</span>
</button>

---

Element+

디자이너와 개발자를 위한 Vue 3 기반 컴포넌트 라이브러리

https://element-plus.org/en-US/guide/installation.html#using-package-manager
https://element-plus.org/en-US/guide/quickstart.html

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

https://element-plus.org/en-US/component/overview.html

• Basic
  • Button, Scrollbar
• Form
  • Autocomplete, Cascader, Checkbox, Date Picker, DateTime Picker
  • Form, Input, Input Number, Radio, Select, Slider, Switch, TreeSelect, Upload
• Data
  • Badge, Calendar, Carousel, Collapse, Empty, Pagination, Progress, Table, Tag, Tree, Segmented
• Navigation
  • Breadcrumb, Dropdown, Menu, Steps, Tabs
• Feedback
  • Alert, Dialog, Loading, Message, Notification, Popconfirm, Popover, Tooltip

<el-button>Default</el-button>
🔽
<button type="button" class="el-button">
  <span>Button</span>
</button>