Element Plus Quick Start

This skill provides comprehensive guidance for setting up Element Plus in Vue 3 projects, including installation, import methods, and global configuration.

When to Invoke

Invoke this skill when:

User wants to install Element Plus in a Vue 3 project
User needs help with full import vs on-demand import
User asks about configuring Element Plus with Vite, Webpack, or Nuxt
User needs to set up global configuration (size, zIndex)
User encounters issues with Element Plus installation or setup

Installation Methods

Package Manager Installation

# npm
npm install element-plus --save

# yarn
yarn add element-plus

# pnpm
pnpm install element-plus

Browser Import (CDN)

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

Import Methods

Full Import

Suitable for projects where bundle size is not a primary concern.

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

Add global component type definition in tsconfig.json:

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

On-Demand Import (Recommended)

Install required plugins:

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

Vite Configuration

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 Configuration

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()],
    }),
  ],
}

Nuxt Integration

Install the Nuxt module:

npm install -D @element-plus/nuxt

Add to Nuxt config:

export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

Global Configuration

Full Import Configuration

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 Configuration

Use el-config-provider:

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

<script setup>
import { ref } from 'vue'

const zIndex = ref(3000)
const size = ref('small')
</script>

Browser Compatibility

Version	Chrome	Edge	Firefox	Safari
< 2.5.0	≥ 64	≥ 79	≥ 78	≥ 12
2.5.0+	≥ 85	≥ 85	≥ 79	≥ 14.1

Note: Element Plus does not support IE11 since Vue 3 no longer supports IE11.

Sass Configuration

For version 2.8.5+, the minimum compatible Sass version is 1.79.0.

To resolve legacy JS API deprecation warning, configure in vite.config.ts:

css: {
  preprocessorOptions: {
    scss: { api: 'modern-compiler' },
  }
}

Starter Templates

Common Issues

Double-Closed Tags in DOM Templates

When using Element Plus in DOM templates, use double-closed tags to avoid parsing issues:

<!-- Correct -->
<el-table>
  <el-table-column></el-table-column>
</el-table>

<!-- Incorrect -->
<el-table>
  <el-table-column />
</el-table>

Input Parameters

When using this skill, provide the following information:

Project type: Vite, Webpack, Nuxt, or CDN
Import method: Full import or on-demand import (recommended)
Configuration needs: Size, zIndex, or other global settings
TypeScript usage: Whether the project uses TypeScript

Output Format

This skill provides:

Installation commands for the specified package manager
Configuration code snippets for the build tool
Global configuration examples
Troubleshooting tips for common setup issues

Usage Limitations

Requires Vue 3.x (does not support Vue 2)
Does not support IE11
For SSR projects, additional configuration may be needed (refer to SSR skill)
CDN usage is not recommended for production applications

element-plus-quickstart