Question

0

170

Views

Add element-ui components to element plus in main.js vue 3

I'm trying to figure out how to change elementu-ui components to element-plus. Part of my migration from vue 2 to vue 3. I find the documentation isn't clear how to register components in vue 3 in the main.js file.

This is the error I get

"export 'Tree' was not found in 'element-plus'
warning  in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'

Here's my main.js file

import Vue, { createApp, h } from 'vue'
import Vue, { createApp, h } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import {
Button,
Select,
Option,
Dropdown,
TableColumn,
Checkbox,
Badge,
Divider,
Tag,
DropdownItem,
Pagination,
Table,
DropdownMenu,
Tree,
Tooltip,
} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/en'
import locale from 'element-plus/lib/locale'



const getCookieConsent = localStorage.getItem('Cookie acceptance')

if (typeof getCookieConsent !== 'undefined' && getCookieConsent === 'true') {
FullStory.init({ orgId: '14C6AX' })
Vue.prototype.$FullStory = FullStory
}

locale.use(lang)

Vue.component(Tree.name, Tree)
Vue.component(Button.name, Button)
Vue.component(Divider.name, Divider)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Pagination.name, Pagination)
Vue.component(Tag.name, Tag)
Vue.component(Badge.name, Badge)
Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Select.name, Select)
Vue.component(Dropdown.name, Dropdown)
Vue.component(DropdownItem.name, DropdownItem)
Vue.component(DropdownMenu.name, DropdownMenu)
Vue.component(Tooltip.name, Tooltip)
Vue.component(Option.name, Option)




createApp({
render: () => h(App)
}).use(router).use(store).mount('#app')

5 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-25T23:04:21.676Z

In Vue 3, it is not possible (or at least it shouldn't be done that way) to register components globally. You have to create a Vue app using createApp, and then register components for this app.

Also, the element-plus documentation explains everything you need to know to import their components.

// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// Create your Vue 3 app
const app = createApp(App)

// Choice #1: register all components. Impacts global bundle size
app.use(ElementPlus, {
  // options
})

app.mount('#app')

If you want to use treeshaking, just import the components when you need them:

// my-component.vue
// Choice #2: import and register components as you need them
import { ElTree } from 'element-plus'

export default {
  components: {
    ElTree
  }
}

Try to import all components with the prefix El, they are exported this way apparently.

Answer 2 · 2022-06-25T23:04:21.684Z

I update my package and the previous code not work any more. At last I modified some code and it works. 1, vite.config.js remove

      {
        libraryName: 'element-plus',
        libraryDirectory: 'es',
        style(name) {
          return `element-plus/theme-chalk/${name}.css`;
        },
      }
    ])

2, main.js the past use(component) to remove. Change to:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus, {
  // options
})
app.component("ElSubmenu", ElMenu.SubMenu); // ElSubmenu seems special to register like this