Use Ant Design UI Library with Vue3

How to Install and Use Ant Design with Vue3

Photo by Elena Rouame on Unsplash

I followed most of the steps described in the url below but I had to change a library’s version in my dependencies (because I was still getting an error) and also wanted to add all components of the library instead of importing specific ones.

Setup Vue3 with Ant Design

So these are the steps I followed combined with the ones above:

To install the required libraries:

npm install ant-design-vue@next @ant-design/icons-vue
npm install -D less less-loader babel-plugin-import

Created “vue.config.js” and “babel.config.js” files with the contents below:

vue.config.js:

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

babel.config.js:

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

Please pay attention to the “libraryDirectory” with the value “es”. If you navigate to your “node_modules” folder, you will see the path it refers to:

node_modules

Instead of adding components specifically one by one, if you want to import them all for your project, you can update your “main.js” file like this:

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.config.productionTip = false;
app.use(Antd);
app.use(router);
app.use(store);
app.mount('#app');
//createApp(App).use(store).use(router).mount("#app");

As you can see, in Antd import, the path is “ant-design-vue/es” which we defined (with libraryName and libraryDirectory ) in our “babel.config.js” file.

When you yarn serve, you may be getting an error like:

“TypeError: this.getOptions is not a function”

Finally, after lots of pages visited and many trials and errors, this worked for me (mine was — “less-loader”: “^10.2.0”):

yarn add -D less-loader@7.3.0

Final version of my “package.json” file:

After all these, for a clean install (run these commands under your project folder path):

rm -rf node_modules
rm package-lock.json
yarn install

You can now add any component you wish. For testing purposes,

<a-button type="primary">Primary Button</a-button>

Ready, Set, Go!

https://next.antdv.com/

Happy Coding!