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.
>  Vue

Choose the Customize option with create-vue.

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

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


Test Element Plus components now.

    <el-row class="mb-4">
      <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>
vue 3 element plus
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,

Share link