Ant Design Vue 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

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

npx nuxi@latest module add ant-design-vue

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.

extractStyle (1.4.1)

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>

Development

# 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