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

title	lang
Quick Start	en-US

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')

Volar support

If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.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.

npm install -D unplugin-vue-components unplugin-auto-import

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

Vite

// vite.config.ts
import { 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

// webpack.config.js
const 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.

npm install -D @element-plus/nuxt

Then add the code below into your config file.

// nuxt.config.ts
export 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

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

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

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

:::warning

You need to manually import the styles if you're using unplugin-element-plus and only used the component API.

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

:::

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:

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:

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

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 the individual component documentation.