TheLazy.Dev
Portfolio GitHub

Blog

vue |vue3 |antdesign

Setup Vue3 with Ant Design

alandecastros

Alan Castro

Posted on November 3, 2020

Setup Vue3 with Ant Design

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Create a vue.config.js file 

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Edit the babel.config.js file 

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

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');
Enter fullscreen mode Exit fullscreen mode

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!

💖 💪 🙅 🚩
alandecastros
Alan Castro

Posted on November 3, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Setup Vue3 with Ant Design
vue Setup Vue3 with Ant Design

November 3, 2020