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.
  Vanilla
>  Vue
  React
  Preact
  Lit
  Svelte
  Others

Now select Customize with create-vue .

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

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.

main.ts

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

app.use(Antd).mount('#app');

Test the Vue 3 Ant Design button component.

HomeView.vue

Vue

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

<template>
  <main>
    <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>
  </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,