This is what the element plus message box looks like on a minimal page I built:
I want it to look like the one in the element-plus documentation.
I use Vue with vite and ElementPlus. I copied the settings from vite and element plus documentation. I played with a lot of other elements and they all rendered correctly. Minimal App.vue
component that 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>
Myvite.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 very small:
<!DOCTYPE html> <title>Vite + Vue</title> <div id="app"></div> <script type="module" src="/src/main.js"></script>
The same goes for scripts:
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" } }
Not required if you used "unplugin-auto-import/vite" and "unplugin-vue-components/vite":
I would say the documentation doesn't explain it well enough https://element -plus.org/en-US/guide/quickstart.html
When using
ElMessage
orElMessageBox
, their styles may need to be imported manually. The Quick Start/Import on Demand section doesn't say anything about this, and all the other elements work out of the box, so it's a bit confusing.