Ant Design Vue Nuxt

Ant Design Vue module for Nuxt

• ✨  Release Notes

Features

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

Quick Setup

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

# Using pnpmpnpm add -D @ant-design-vue/nuxt# Using yarnyarn add --dev @ant-design-vue/nuxt# Using npmnpm install --save-dev @ant-design-vue/nuxt

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 ✨

Usage

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.

Options

components

• 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']

imports

• Type: array

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

icons

• 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.

Development

# Install dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Build for productionnpm run build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release