Ant Design Vue module for Nuxt

• ✨  Release Notes

• ✨  Automatically import components on demand.
• ✨  Automatically import icons from @ant-design/icons-vue.
• ✨  Automatically import of message, notification and Modal methods.

1. Add @ant-design-vue/nuxt dependency to your project

npx nuxi@latest module add ant-design-vue

2. Add @ant-design-vue/nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({ modules: [ '@ant-design-vue/nuxt' ], antd:{ // Options } })

That's it! You can now use ant-design-vue in your Nuxt app ✨

Online Playground

<script lang="ts" setup> const handleMessage = () => {  message.info("This is a normal message"); } </script> <template> <a-button @click="handleMessage"> button </a-button> </template>

Reference Nuxt documentation and playground use.

• Type: array | 'false'

If there are components that are not imported automatically from Ant Design Vue, you need to add the component name here.

e.g.['Button']

• Type: array

If you wish to add automatically import content from Ant Design Vue, you can add it here.

• Type: array | 'false'

If there are components that are not imported automatically from @ant-design/icons-vue, you need to add the component name here.

• Type: boolean

Solve page css flicker problem

Extracts and injects css on demand, defaults to false

<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue --> <template> <a-extract-style> <!-- Your page or component --> </a-extract-style> </template>

# Install dependencies npm install # Generate type stubs npm run dev:prepare # Develop with the playground npm run dev # Build the playground npm run dev:build # Build for production npm run build # Run ESLint npm run lint # Run Vitest npm run test npm run test:watch # Release new version npm run release