Setup Vue3 with Element UI

olivia

Olivia

Posted on January 17, 2021

Setup Vue3 with Element UI

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
Enter fullscreen mode Exit fullscreen mode

Create a project with Vue CLI

vue create my-app
// And then select Vue 3 option.
Enter fullscreen mode Exit fullscreen mode

Vue CLI VUE3

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
Enter fullscreen mode Exit fullscreen mode

Element Plus Vue CLI plugin

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

<template>
  <el-button type="primary"> Element UI </el-button>
</template>
Enter fullscreen mode Exit fullscreen mode

Element Plus with Vue 3

Check out this repository with this configuration done:

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

That's it!

💖 💪 🙅 🚩
olivia
Olivia

Posted on January 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related