Setup Vue3 with Ant Design

#vue #vue3 #antdesign

Ant design is my favorite design system and they already have a version that works with Vue3.

I'd like to share how to setup a Vue3 project with Ant Design using vue-cli.

Create a project with vue-cli

vue create your-app-name

And then select Vue 3 option.

Install Vue Ant Design and some dependencies

cd create your-app-name
npm install ant-design-vue@next @ant-design/icons-vue
npm install -D less less-loader babel-plugin-import

Create a `vue.config.js` file

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },
};

Edit the `babel.config.js` file

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],
};

Now you can import ant designs components on main.js like the following.

import { createApp } from 'vue'
import {
  Layout,
  Button,
  Spin,
  Result,
  Card,
  Divider,
  Col,
  Row,
  Drawer,
  Table,
  Form,
  InputNumber,
  Tag,
} from 'ant-design-vue';
import App from './App.vue'

const app = createApp(App);
app.config.productionTip = false;
app.use(Layout);
app.use(Button);
app.use(Spin);
app.use(Result);
app.use(Card);
app.use(Divider);
app.use(Col);
app.use(Row);
app.use(Drawer);
app.use(Table);
app.use(Form);
app.use(InputNumber);
app.use(Tag);
app.mount('#app');

Check out my repository with this configuration done: https://github.com/alandecastros/vue3-ant-design-starter

See all the components that Ant Design offers at https://2x.antdv.com/docs/vue/introduce/.

That's it!

Top comments (6)

NOPR9D ☄️ • Nov 17 '20 • Edited

Nice !

chainWebpack equivalent :

module.exports = {
  chainWebpack: (config) => {
  config.module
      .rule("less")
      .use("less-loader")
      .loader("less-loader")
      .options({ javascriptEnabled: true })
      .end();
},
};