element-plus/docs/en-US/guide/quickstart.md

title
Quick Start

Quick Start

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.

// main.ts
import { 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')

On-demand Import

You need to use an additional plugin to import components you used.

Auto import Recommend

First you need install unplugin-vue-components.

npm install unplugin-vue-components

Then add the code below into your Vite or webpack config file.

Vite

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Webpack

// webpack.config.js
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

For more bundlers (Rollup, Vue CLI) and configs please reference unplugin-vue-components.

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

<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [ElementPlus()],
}

Starter Template

Vue CLI

We prepared a plugin Element Plus VueCLI plugin. For vue-cli, you can setup a project based on Element Plus easily.

Using Starter Kit

We provide a general Project Template, also a Vite 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:

import { 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:

import { createApp } from 'vue'
import { ElButton } from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$ELEMENT = {
  // options
}
app.use(ElButton)

Using Nuxt.js

We can also use Nuxt.js：

Let's Get Started

You can bootstrap your project from now on, for each components usage, please refer to individual component documentation.