Using Ant design Vue in Nuxt 3

1. Install Ant degin and ant design icons for Vue

yarn add ant-design-vue @ant-design/icons-vue

2. Create a new file named antd.ts under the plugins folder

Copy and paste this code inside

import {defineNuxtPlugin} from "#app";
import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd)
})

3. Register your newly created plugin

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    plugins:['@/plugins/antd']
})

4. Enjoy 🚀

From now you can enjoy Ant design by running your nuxtjs development server:

yarn dev

POV:

• The current plugin registers all components. If you want to register only a few or want to do any customization please refer to Ant design docs and update your plugins/antd.ts
• Yes, it adds typings

References

https://github.com/nuxt/framework/discussions/1208#discussioncomment-3589542

Comments

[chenzhuoqi]

Best practice

import * as AntD from 'ant-design-vue'
import { addComponent } from '@nuxt/kit'

export default defineNuxtConfig({
  modules: [
    function (options, nuxt) {
      for (const key in AntD) {
        if (['version', 'install'].includes(key)) continue
        await addComponent({
          filePath: 'ant-design-vue',
          name: `A${key}`,
          export: key
        })
      }
    },
  },
})

References
github.com/nuxt/nuxt/discussions/1...

[Sandro Michl]

Hey,
thanks for the advice!
Do you know how I can use a custom theme for ant design?