Overview

Environment: Vue 3 + Vite + Ant Design Vue + Vue Router

Complete Global Registration

Install Ant Design Vue

npm install ant-design-vue@next --save

Register in main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from '@/router'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App)

app.use(createPinia())
app.use(Antd)
app.use(router)
app.mount('#app')

Note: The CSS file has changed from antd.css to reset.css.

Use in App.vue

<template>
  <h1>app</h1>

  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
</template>

On-Demand Import with Automatic Loading

(Using pnpm for package management)

Install Dependencies

pnpm install ant-design-vue
pnpm install babel-plugin-import

Configure babel.config.ts

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: true,
    }]
  ]
}

Register Components in main.js

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import { Button } from 'ant-design-vue';

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Button)

app.mount('#app')

Use Button Component

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

Button with Icons

<script setup lang="ts">
import { SearchOutlined } from '@ant-design/icons-vue';
</script>

<template>
  <a-button type="primary" shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button type="primary" shape="circle">A</a-button>
  <a-button type="primary">
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button>
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
</template>

Using Layout Components

Register in main.ts

import { Layout } from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

app.use(Layout)

Use in .vue Files

<template>
  <div class="container">
    <a-layout class="layoutbox">
      <a-layout-sider>Sider</a-layout-sider>
      <a-layout>
        <a-layout-header>Header</a-layout-header>
        <a-layout-content>
          <h2>Content Area</h2>
        </a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<style scoped>
.layoutbox {
  text-align: center;
}
.ant-layout-header,
.ant-layout-footer {
  color: #fff;
  background: #7dbcea;
}
[data-theme='dark'] .ant-layout-header {
  background: #6aa0c7;
}
[data-theme='dark'] .ant-layout-footer {
  background: #6aa0c7;
}
.ant-layout-footer {
  line-height: 1.5;
}
.ant-layout-sider {
  color: #fff;
  line-height: 120px;
  background: #3ba0e9;
}
[data-theme='dark'] .ant-layout-sider {
  background: #3499ec;
}
.ant-layout-content {
  min-height: 120px;
  color: #fff;
  line-height: 120px;
  background: rgba(16, 142, 233, 1);
}
[data-theme='dark'] .ant-layout-content {
  background: #107bcb;
}
</style>

Troubleshooting Common Errors

Ant Design Vue 4+ does not include @ant-design/icons.

Fix

pnpm install @ant-design/icons-vue