Ant Design is one of the few UI libraries that earns its keep: workable defaults, straightforward extension points, and a considered visual language. Nuxt pairs with it particularly well, since its code splitting and tree shaking keep the resulting bundle under control, and the static target option means the finished app can be deployed without a server while still scoring well.

What follows is the setup path, since the Ant Design getting-started guide doesn't cover the Nuxt integration.

Dependencies

Three packages go in: the Vue bindings for Ant Design, plus the Less toolchain, since the theme variables are written in Less.

yarn add ant-design-vue less less-loader
# or
npm i ant-design-vue less less-loader

One deliberate divergence from the official guide: the global CSS import it recommends is skipped. The base variable Less file is pulled in by hand instead, which is what makes overriding possible at all.

Plugin and webpack wiring

Registration happens through a plugin, antd-ui.js:

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)

Three edits to nuxt.config.js follow. The plugin gets declared:

plugins: ["@/plugins/antd-ui"],

webpack needs to know Less is in play:

build: {
   loaders: {
     less: {
       lessOptions: {
         javascriptEnabled: true,
       },
    },
  },
}

And a global stylesheet is registered that pulls in Ant Design's defaults alongside the overrides:

css: [
  "~/assets/variables.less"
],

Theming through variables

That stylesheet lives under /assets, so create the folder if it isn't there, then add variables.less and start it by importing Ant Design's own variables:

@import '~ant-design-vue/dist/antd.less';

Every variable below that import is fair game for an override. The sample below is only an illustration — the full set lives in Ant Design Vue's default.less, and each entry is referenced by its @-prefixed name:

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

No component-level imports are needed once this is in place; Nuxt handles that. Styles that fall outside the variable system can still be targeted by locating the relevant class and overriding it in layouts/default.vue.