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,