Ant Design Vue module for Nuxt
- ✨  Automatically import components on demand.
- ✨  Automatically import icons from @ant-design/icons-vue.
- ✨  98EE Automatically import of message, notification and Modal methods.
- Add
@ant-design-vue/nuxtdependency to your project
# Using pnpm
pnpm add -D @ant-design-vue/nuxt
# Using yarn
yarn add --dev @ant-design-vue/nuxt
# Using npm
npm install --save-dev @ant-design-vue/nuxt- Add
@ant-design-vue/nuxtto themodulessection ofnuxt.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 ✨
<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.
# 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