DEV Community

Nwanguma Victor
Nwanguma Victor

Posted on • Edited on

Using Ant design Vue in Nuxt 3

#nuxt #antdesign #vue

1. Install Ant degin and ant design icons for Vue 

yarn add ant-design-vue @ant-design/icons-vue
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode

3. Register your newly created plugin 

import { defineNuxtConfig } from 'nuxt';

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

4. Enjoy 🚀

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

yarn dev
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
zhuoqichen profile image
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
        })
      }
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
sientaax profile image
Sandro Michl •

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

Read next

jacobandrewsky profile image

Opinionated Nuxt Starter

Jakub Andrzejewski -

mujhtech profile image

How to add a feedback box to your Vue.js app (and get notified on Slack)

Muhideen Mujeeb Adeoye -

emrancu profile image

1.1 Ins & outs of ES6(JavaScript) Import with Realworld Example and Demo Project.

AL EMRAN -

bensoutendijk profile image

Using Web Workers in Vue 3

Ben Soutendijk -