Vue 3 UI component library for 2021

Olivia — Wed, 20 Jan 2021 12:30:26 +0000

Vue has released its 3.0 version while most of its ecosystem library such as UI component libraries are still under development to the new version.

Let see if there are some UI component libraries that work with Vue 3 for 2021 by comparing the development progress of the top 3 UI component libraries.

1. Element ✅

Element is a UI component library for web developers and a design language for designers. It works with Vue’s Server-Side Rendering (SSR). Element also has a good community and regular updates.

As we could tell from it's Github, they have released a new version called Element Plus for Vue 3 😁. A production-ready version that we could use today.

Element Plus Website https://element-plus.org
Element Plus Github https://github.com/element-plus/element-plus

2. Ionic ✅

Ionic is an open-source mobile UI toolkit for building high quality, cross-platform native and web app experiences.

According to its website, Ionic Vue is built on top of Vue 3.0.0.

Ionic Website https://ionicframework.com/
Ionic Github https://github.com/ionic-team/ionic-framework

3. Primevue ✅

Primevue is a simple to use, versatile, performant Vue UI Component Library to build stunning user interfaces.

According to its website, Primevue3 supports Vue 3.

Primevue Website https://www.primefaces.org/primevue
Primevue Github https://github.com/primefaces/primevue

4. Vuetify ❌

Vuetify is a framework over Vue, which lets you create clean, semantic, reusable UI components.

According to its website, the migration is still under development and we could use it in 2021 Q3 😭, which is a long time to wait.

Vuetify Website https://vuetifyjs.com/en/
Vuetify Github https://github.com/vuetifyjs/vuetify

5. Quasar ❌

Quasar is a front end framework based on Vue. You should consider it if you plan to work on the responsive web and mobile applications.

As mentioned on its Github, there's no release that works with Vue 3, however, there will be one soon in 2021 Q1😥.

Quasar Website https://quasar.dev/
Quasar Github https://github.com/quasarframework/quasar

At last, we've compared the top 3 UI component libraries and Element UI is the only winner that already supports Vue 3 at present. Wish other libraries in the Vue ecosystem could work harder to make it fully compatible with the new version of Vue.

Setup Vue3 with Element UI

Olivia — Sun, 17 Jan 2021 08:11:56 +0000

Element UI is my favorite Vue UI library. A popular top-class component library with more than 50K Github stars. And they already have a version that works with Vue3 - Element Plus.

I'd like to share how to set up a Vue3 project with Element Plus using Vue CLI.

Install the latest version of Vue CLI

npm install -g @vue/cli

Create a project with Vue CLI

vue create my-app
// And then select Vue 3 option.

Install Element Plus

You can add Element Plus to your project simply via its Vue CLI plugin.

cd my-app
vue add element-plus
npm run serve

Now you can use Element Plus components in your project like the following.

<template>
  <el-button type="primary"> Element UI </el-button>
</template>

Check out this repository with this configuration done:

https://github.com/element-plus/element-plus-starter

That's it!

DEV Community: Olivia