This section describes how to use Element Plus in your project.
Usage Full Import If you don’t care about the bundle size so much, it’s more convenient to use full import.
ts// main.tsimport { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)app.mount('#app')Volar support If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.
json// tsconfig.json{ "compilerOptions": {// ..."types": ["element-plus/global"] }}On-demand Import You need to use an additional plugin to import components you used.
Auto import Recommend First you need to install unplugin-vue-components and unplugin-auto-import.
shellnpm install -D unplugin-vue-components unplugin-auto-importThen add the code below into your Vite or Webpack config file.
Vite ts// vite.config.tsimport { defineConfig } from 'vite'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({ // ... plugins: [// ...AutoImport({ resolvers: [ElementPlusResolver()],}),Components({ resolvers: [ElementPlusResolver()],}), ],})Webpack js// webpack.config.jsconst AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = { // ... plugins: [AutoImport({ resolvers: [ElementPlusResolver()],}),Components({ resolvers: [ElementPlusResolver()],}), ],}For more bundlers (Rollup, Vue CLI) and configs please reference unplugin-vue-components and unplugin-auto-import.
Nuxt For Nuxt users, you only need to install @element-plus/nuxt.
shellnpm install -D @element-plus/nuxtThen add the code below into your config file.
ts// nuxt.config.tsexport default defineNuxtConfig({ modules: ['@element-plus/nuxt'],})Refer to the docs for how to configure it.
Manually import Element Plus provides out of box Tree Shaking functionalities based on ES Module.
But you need install unplugin-element-plus for style import. And refer to the docs for how to configure it.
App.vue
html I am ElButton import { ElButton } from 'element-plus' export default {components: { ElButton }, }ts// vite.config.tsimport { defineConfig } from 'vite'import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({ // ... plugins: [ElementPlus()],})Starter Template We provide a Vite Template.
For Nuxt users we have a Nuxt Template.
For Laravel users we have a Laravel Template.
Global Configuration When registering Element Plus, you can pass a global config object with size and zIndex to set the default size for form components, and zIndex for popup components, the default value for zIndex is 2000.
Full import:
tsimport { createApp } from 'vue'import ElementPlus from 'element-plus'import App from './App.vue'const app = createApp(App)app.use(ElementPlus, { size: 'small', zIndex: 3000 })On-demand:
vueimport { defineComponent } from 'vue'import { ElConfigProvider } from 'element-plus'export default defineComponent({ components: {ElConfigProvider, }, setup() {return { zIndex: 3000, size: 'small',} },})Using Nuxt.js We can also use Nuxt.js:
Let's Get Started