Install Element Plus in Vue 3 with TypeScript

In this tutorial, I’ll guide you through installing Element Plus in Vue 3 with TypeScript.

Install Vue 3 with Vite

Select the option below to install Vue 3 with Vite.

With NPM:

npm create vite@latest

With Yarn:

yarn create vite

With PNPM:

pnpm create vite

Select the Vue project option now.

√ Project name: ... vue-element-plus
? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
>  Vue
  React
  Preact
  Lit
  Svelte
  Others

Choose the Customize option with create-vue.

√ Select a framework: » Vue
? Select a variant: » - Use arrow-keys. Return to submit.
  JavaScript
  TypeScript
 > Customize with create-vue ↗
  Nuxt ↗

Please add TypeScript and select your Vue 3 project requirements.

√ Project name: ... vue-element-plus
√ Select a framework: » Vue
√ Select a variant: » Customize with create-vue ↗

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in C:\webvees\vue-element-plus...

Done. Now run:

cd vue-element-plus
npm install
npm run dev

Install Element Plus in Vue 3

Run Below command to install element plus.

# Choose a package manager you like.

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

Import Element Plus in main.ts.

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

Test Element Plus components now.

Vue

<template>
  <main>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </main>
</template>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,