When using Element Plus auto import, the styles of ElMessageBox and ElMessage are lost¶

According to the following document of element-plus official website, I introduced auto import to my project.

https://element-plus.gitee.io/en-US/guide/quickstart.html#on-demand-import

The problem is that the messagebox related API like ElMessage(...) and ElMessageBox.prompt(...) are not working normally. They have no css styles!

Cause Analysis¶

After I introduced auto import to my project, a ts file components.d.ts is auto generated, it contains many components. Here's an example:

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module 'vue' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

These are the components that I already used in my project's vue templates. So, I guess that the auto import mechanism can only find components used in templates! ElMessageBox and ElMessage are used in script, so they are not found.

Solution¶

Manually add styles of components like ElMessageBox and ElMessage. Here's the code example of my main.js:

import { createApp } from 'vue'

// Manually add styles of ElMessageBox and ElMessage
import 'element-plus/es/components/message-box/style/css'
import 'element-plus/es/components/message/style/css'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')