Install Vite + Ant Design + TypeScript In Vue 3

In this tutorial, I’ll guide you through the process of installing Ant Design in a Vue 3 project with TypeScript using the Vite build tool.

Create Vue 3 Project

Install a Vue 3 project with the following command in your terminal:

# With NPM:
npm create vite@latest
# With Yarn:
yarn create vite
# With PNPM:
pnpm create vite

Next, give project name and select vue project.

$ npm create vite@latest
 Project name: ... ant-vue
? Select a framework: » - Use arrow-keys. Return to submit.
>  Vue

Now select Customize with create-vue .

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

Select your Vue 3 project requirements, such as TypeScript and routes.

 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

Move to project dir.

cd ant-vue
npm install
npm run dev

Install Ant Design In Vue 3

Run the command below to install Ant Design in Vue 3.

# With NPM:
npm install ant-design-vue --save
# With Yarn:
yarn add ant-design-vue

Next, manually import Ant Design stylesheets in main.ts.

import 'ant-design-vue/dist/antd.css'

Use Ant Design global registration for all components.


import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);


Test the Vue 3 Ant Design button component.


<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'

    <TheWelcome />
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
Vite + Ant Design + TypeScript In Vue 3
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