element-plus-quickstart

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