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
Top comments (2)
Best practice
References
github.com/nuxt/nuxt/discussions/1...
Hey,
thanks for the advice!
Do you know how I can use a custom theme for ant design?