DEV Community

loading...
Cover image for Setup Vue3 with Element UI

Setup Vue3 with Element UI

beccabycott profile image Becca Bycott ・1 min read

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!

Discussion (0)

pic
Editor guide