Ant Design Vue module for Nuxt

Info

A somewhat comprehensive module for Ant Design Vue

Setup

1. Add @nuxt-alt/antdv and less dependency to your project

yarn add @nuxt-alt/antdv less

2. Add @nuxt-alt/antdv to the modules section of nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxt-alt/antdv'
    ],
    antdv: {
        /* module options */
    }
});

Options

styles

• Type: String
• Default: less

Whether to use less or css for procesing. Do note that all themes options will not work with css as it is a pre-generated file.

Style	Description
less	Renders the stylesheet in less
css	Renders the stylesheet in css

icons

• Type: Boolean
• Default: true

Whether to enable resolving icons for ant-design-vue.

themes.suffix

• Type: String
• Default: -theme

The suffix for when using the custom mode.

themes.mode

• Type: String
• Default: default

The theme mode to choose for ant-design-vue, choosing default will disable the option to use custom themes as they rely on being enclosed in a class.

Mode	Description
default	Renders the default theme of ant-design-vue, which is the light theme but without being enclosed into a theme class
custom	disables the default theme in favor of using the light and/or dark theme

themes.dark

• Type: Object | boolean
• Default: false

Modify the properties of the default dark theme.

Properties	Type	Description
compact	Boolean	Whether to use compact variables
theme	String	The theme's name
themePrefix	String	Prefix of the theme to use for enclosing
modifyVars	Object	The variables to edit for the theme

themes.light

• Type: Object | boolean
• Default: false

Modify the properties of the default light theme.

Properties	Type	Description
compact	Boolean	Whether to use compact variables
theme	String	The theme's name
themePrefix	String	Prefix of the theme to use for enclosing
modifyVars	Object	The variables to edit for the theme

themes.prefixClass

• Type: String
• Default: ant

Set the Class prefix for all the themes. For example instead of ant-button, if you were to set it as app it would then be app-button. You also need to change this in your ConfigProvider for ant-design-vue`

themeConfig

• Type: Array
  • Items: Object
• Default: []

You may register any other themes you wish to include in the preprocessing options.

Example (Example of a dark theme):

// nuxt.config.ts
export default defineNuxtConfig({
    antdv: {
        themeConfig: [{
            theme: 'dark',
            themePrefix: 'dark',
            dark: true,
            compact: false,
            modifyVars: {
                'text-color': 'fade(@white, 65%)',
                'gray-8': '@text-color',
                'background-color-base': '#555',
                'skeleton-color': 'rgba(0,0,0,0.8)',
                'root-entry-name': 'dark'
            },
        }]
    }
});

Setting the dark property will use the dark variables, setting the compact proprty will use compact variables.