5

This is how element-plus message box looks on a minimal page I built: enter image description here

I was expecting it to look like on the element-plus documentation.

I am using Vue with vite and ElementPlus. I copied the setup from vite and element plus documentation. I played with a lot other elements and they all render correctly. The minimal App.vue component which can reproduce the problem:

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK'
  })
}
</script>

My vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  base: ''
})

The page is minimal:

<!DOCTYPE html>
<title>Vite + Vue</title>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>

And so is the script:

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Finally my package.json:

{
  "name": "v2",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^20.0.2",
    "element-plus": "^2.2.12",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.2",
    "unplugin-auto-import": "^0.11.1",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.0.6"
  }
}
tao
  • 82,996
  • 16
  • 114
  • 150
jakubiszon
  • 3,229
  • 1
  • 27
  • 41
  • 1
    All the code shared above is irrelevant. Because you're not showing us how you're loading Element styles. It sounds like you're loading and scoping them to your app's DOM element (e.g: everything else looks as it should), but they don't apply outside of the app element (the message box and modals are direct children of `` so, technically, they're not inside the app element). Please take time to read [installation](https://element-plus.org/en-US/guide/installation.html#installation). – tao Aug 12 '22 at 02:16
  • Well, that is the point - I do not style the elements myself here. What I am doing is described in **On-demand Import** section here https://element-plus.org/en-US/guide/quickstart.html#on-demand-import – jakubiszon Aug 12 '22 at 08:09

2 Answers2

8

I'd say documentation does not explain it well enough https://element-plus.org/en-US/guide/quickstart.html

When ElMessage or ElMessageBox are used their styles might need to be imported manually. The quick start / On-demand Import section does not say anything about it and all other elements work out of the box, so it is somewhat confusing.

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import 'element-plus/es/components/message/style/css'; // this is only needed if the page also used ElMessage
import 'element-plus/es/components/message-box/style/css';

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK'
  })
}
</script>
jakubiszon
  • 3,229
  • 1
  • 27
  • 41
  • You seem to have skipped the [installation](https://element-plus.org/en-US/guide/installation.html#installation). There is nothing in their documentation that says ElementUI should usable without being installed. Even though you seem to have discovered it does work, for some components. But if you do install, in every single method of installation they specify the CSS import. I don't find it confusing. All decently documented libraries mention the usage requirements in "getting started" or "installation" section. ElementUI is no exception. You just chose to ignore the documentation. – tao Aug 12 '22 at 11:44
  • I actually exactly followed the steps described in [installation / Using Package Manager](https://element-plus.org/en-US/guide/installation.html#using-package-manager) and [quick start / On-demand Import](https://element-plus.org/en-US/guide/quickstart.html#on-demand-import). They do not mention anything about the styles and most elements work out of the box. @tao could you advise on which parts did I ignore? The [installation guide](https://element-plus.org/en-US/guide/installation.html) only mentions importing all styles when using unpkg and jsDelivr but I do not use them. – jakubiszon Aug 12 '22 at 13:21
  • 1
    Sorry, I missed that. In that case, your expectancy is correct. I suggest you open an issue on their repo. – tao Aug 12 '22 at 15:46
  • 2
    2023: Still needs to be manually imported, now it is via `import 'element-plus/theme-chalk/src/message-box.scss'` – FriskyGrub May 04 '23 at 02:04
0

if you have use 'unplugin-auto-import/vite' and 'unplugin-vue-components/vite', this is not needed:

import { ElMessageBox } from 'element-plus';

duXing
  • 1,377
  • 1
  • 10
  • 24