Setting up and Customizing the Ant Design System in a Nuxt App

While UI libraries can sometimes feel cumbersome and difficult to customize, Ant Design stands out for its user-friendliness, flexible defaults, and elegant design. This has made it a welcome addition to my toolkit.

Nuxt.js and Ant Design are a powerful combination, leveraging Nuxt's code-splitting and tree-shaking for optimized performance, especially with Nuxt's static site generation capabilities. This allows for high-performing applications even when using a rich UI library like Ant Design.

Integrating them requires a few steps, as comprehensive documentation is currently limited. Let's walk through the process.

Integrating Ant Design into Your Nuxt App

First, install the necessary packages:

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

Next, create a plugin (antd-ui.js) to register Ant Design globally:

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

Vue.use(Antd)

Note: Unlike the standard Ant Design setup, we're not importing the global CSS. Instead, we'll manage styles via Less variables for easier customization.

Now, configure Nuxt (nuxt.config.js):

1. Register the plugin:

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

2. Enable Less compilation:

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

3. Specify a global stylesheet for Less variables:

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

Create the variables.less file (in /assets) to import Ant Design's defaults and apply your overrides:

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

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

That's it! Nuxt handles component imports automatically. For highly specific style overrides not covered by variables, adjust styles within your layouts/default.vue file.

Ant Design and Nuxt provide a streamlined, efficient framework for rapid application development. Enjoy!

The above is the detailed content of Setting up and Customizing the Ant Design System in a Nuxt App. For more information, please follow other related articles on the PHP Chinese website!