Inject element-ui components into the element plus in main.js of vue 3

Question

Inject element-ui components into the element plus in main.js of vue 3

I am currently working on transitioning element-ui components to element-plus as part of my migration from vue 2 to vue 3. I have found that the documentation is lacking clarity on how to register components in vue 3 within the main.js file.

The error message I encounter is:

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

Below is a snippet of 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')

javascript vue.js vuejs3

Answer 1

Answer №1

In Vue 3, registering components globally is not recommended. Instead, you should create a Vue app using the createApp method and register components for that specific app.

The element-plus documentation provides detailed instructions on how 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)

// Option #1: Register all components (affects global bundle size)
app.use(ElementPlus, {
  // options
})

app.mount('#app')

If you prefer treeshaking, simply import and register components when needed:

// my-component.vue
// Option #2: Import and register components as needed
import { ElTree } from 'element-plus'

export default {
  components: {
    ElTree
  }
}

When importing components, it's suggested to use the prefix El, as they are exported in this format.

Answer 2

In Vue 3, registering components globally is not recommended. Instead, you should create a Vue app using the createApp method and register components for that specific app.

The element-plus documentation provides detailed instructions on how 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)

// Option #1: Register all components (affects global bundle size)
app.use(ElementPlus, {
  // options
})

app.mount('#app')

If you prefer treeshaking, simply import and register components when needed:

// my-component.vue
// Option #2: Import and register components as needed
import { ElTree } from 'element-plus'

export default {
  components: {
    ElTree
  }
}

When importing components, it's suggested to use the prefix El, as they are exported in this format.

Answer 3

Answer №2

After updating my package, the previous code stopped working. Fortunately, I made some modifications and now it's functioning correctly. 1. In vite.config.js, delete the following:

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

2. In main.js, replace the old use(component) with the following:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus, {
  // options
})
app.component("ElSubmenu", ElMenu.SubMenu); // Registering ElSubmenu in this way seemed to be necessary

Answer 4

After updating my package, the previous code stopped working. Fortunately, I made some modifications and now it's functioning correctly. 1. In vite.config.js, delete the following:

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

2. In main.js, replace the old use(component) with the following:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus, {
  // options
})
app.component("ElSubmenu", ElMenu.SubMenu); // Registering ElSubmenu in this way seemed to be necessary

Inject element-ui components into the element plus in main.js of vue 3

Answer №1

Answer №2

Similar questions

Utilizing React, manipulating the DOM by utilizing getElementById, and then attempting to swap out a node with a React Component

Transform the angular code in order to execute innerHTML functions

What is the correct way to retrieve store actions within a Vue test scenario?

Problem with declaring Javascript objects

How can I determine when a WebSocket connection is closed after a user exits the browser?

How to incorporate a phone number input with country code using HTML

Performing an action once all AJAX requests have finished

Error: Code layer not located while utilizing "sam invoke local" in AWS

Using the built-in http module in node.js to upload images via multipart/form-data

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

What is the best way to ensure that a regex pattern only matches if it begins with the user's

Issue encountered when setting a background image in Angular

Incorporating Facebook's iOS SDK for engaging with Comments through Connect

How to send responses with parameters in Node.js for .js files

Automatically fill AutoCompleteExtender with all options upon initial selection

Are you able to combine createWebHashHistory and createWebHistory to generate Vue anchor hash links in the router?

Display various divs simultaneously based on the quantity of items in the dropdown menu

"Utilize JavaScript to access and view the contents of a directory

A guide on extracting a URL from source tags using Cheerio/jQuery

Using $.bind() on SVG elements causes an error when a new SVG replaces the original one