How to add element-ui (now called element-plus) to Vue3 project?

Question

How to add element-ui (now called element-plus) to Vue3 project?

5.6k views Asked by AngularOne At 30 September 2020 at 08:46

I have been using "element-ui" and now moving forward to new version of Vue3. Seems they published a new version called "element-plus" but the tutorial is not updated.

import Vue from 'vue';  // not working in Vue3
import ElementUI from 'element-plus';
import 'element-ui/lib/theme-chalk/index.css';
...

Vue.use(ElementUI);  // no "Vue" in Vue3 anymore
...
createApp(App).mount('#app') // the new project creation

https://element-plus.org/#/en-US/component/quickstart

Anyone manged to do it right and it works?

Original Q&A

There are 2 answers

**Tolbxela** · Answer 1 · 2021-09-23 10:08:45

You can also do it very easy without any js bundler.

Here is a sample:

var Main = {
    data() {
      return {
          message: 'Hello World!'
      }
    },
    methods: {
        click()  {
          console.log('click()');
        }          
    }
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")

<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
    <el-button type="primary" size="medium" @click="click">{{message}}</el-button>
</div>
</body>
</html>

**Santiago** · Answer 2 · 2021-08-06 07:39:39

If you are using vue 3 you need to import createApp as well as css from 'element-plus/...' folder. Then you instance your app using the vue function imported, basically you pass your main app component to the function as an argument:

import { createApp } from 'vue'
import App from './YourMainApp.vue'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
    
let app = createApp(App)
app.use(ElementPlus)
    
app.mount('#app')

TechQA.

How to add element-ui (now called element-plus) to Vue3 project?

There are 2 answers

Related Questions in VUEJS2

Related Questions in VUEJS3

Related Questions in ELEMENT-UI

Related Questions in ELEMENT-PLUS

Popular Questions

Popular Tags

Trending Questions