Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.
In this article, we’ll look at how to use it in our Vue apps.
Getting Started
We can install AntD Vue by running:
npm i --save ant-design-vue
Then we can register the plugin by writing:
import Vue from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
Vue.use(Antd);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
This will register the components and load the CSS.
Buttons
We can add buttons with AntD Vue by using the a-button component”
<template>
<div id="app">
<a-button type="primary">Primary</a-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
The type is the color type.
We can add a button group by writing:
<template>
<div id="app">
<a-button-group>
<a-button>L</a-button>
<a-button disabled>M</a-button>
<a-button disabled>R</a-button>
</a-button-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We can add an icon with the icon prop:
<template>
<div id="app">
<a-button icon="search">Search</a-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
To make a button a block-level element, we can add the block prop:
<template>
<div id="app">
<a-button type="primary" block>Primary</a-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Also, we can make it show a loading indicator with the loading prop:
<template>
<div id="app">
<a-button type="primary" loading>Loading</a-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
The size can be changed with the size prop:
<template>
<div id="app">
<a-button type="primary" size="large">Primary</a-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Icon
AntD Vue comes with various icons.
For example, we can add one by writing:
<template>
<div id="app">
<a-icon type="step-backward"/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We use the a-icon component to add the icon.
There are many more we can add. The list is at https://www.antdv.com/components/icon/.
Grid
Ant Design Vue comes with its own layout grid. We can add it with the a-row and a-col components:
<template>
<div id="app">
<a-row>
<a-col :span="12">col-12</a-col>
<a-col :span="12">col-12</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We set the span prop to a value from 0 to 12 to make the layout.
It supports flexbox, and we can set the options with the justify and align props:
<template>
<div id="app">
<a-row type="flex" justify="center" align="top">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now they are all centered.
Conclusion
We can use Ant Design Vue to create a good looking UI in our Vue app.
