Ant Design is an open source library that lets you create attractive and responsive websites. It's an excellent choice for your next project if you want to use a well-tested and easy-to-learn framework.
On the other hand, Vue.js is a progressive framework for creating user interfaces. It is designed to be easy to learn while being flexible and customizable. Using the two together allows you to create responsive websites faster than ever.
The Composition API included in Ant Design and Vue 3 makes it simple to create beautiful, responsive, and scalable applications while writing limited code.
In this short guide, we'll see how to use the ant-design-vue package and how to use the Ant icon system in a Vue 3 application.
-
getting Started
-
Create a new Vue 3 application
-
Install ant-design-vue
-
-
Ant Design components
-
form processing
-
Ant design icon
getting Started
It's also worth mentioning that all the methods described here will work with Vue 3 projects generated using the Vue CLI and Vite.
Create a new Vue 3 application
Let's start by running the following command to create a new Vue 3 application:
vue create my app # or Vite npm initialize vue@3
If you are using Vue CLI, make sure to select Vue 3 as your preferred preset, as shown in the screenshot below:
Install ant-design-vue
You can easily add the ant-design-vue package to your Vue 3 project with the following command:
npm install ant-design-vue # or yarn add ant-design-vue
Once installed, we can start registering it with our project.
One way is to register the package globally in our project so that we can reference its components from anywhere. Bgsub Online Cutout (bgsub.cn), the original painting cutout and background can be saved for free, and the maximum resolution is 4096x4096! This can be achieved by updating the entry file in src/main.js with the following code:
from "vue" import { createApp };
import app from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd).mount("#app");
This way, we can start using its components in our application without any additional imports:
<!-- Components/Sample.vue --> <template> <a-button type="primary">Primary button</a-button> <a-button>default button</a-button> <a-button type="dashed">Dashed button</a-button> </template>
You can also import individual components on demand:
<!-- Components/Sample.vue -->
<template>
<div>
<Button type="primary">Primary button</Button>
<Button>default button</Button>
<Button type="dashed">Dashed button</Button>
</div>
</template>
<script settings>
import {button} from 'ant-design-vue';
import "ant-design-vue/dist/antd.css";
</script>
You may have noticed that we're also importing the Ant Design CSS file into this single file component, and it doesn't make sense to do the same for all of our component files. Packed with 34 essential artifacts, all of which must be installed on the computer, these are enough for system optimization and office work! To solve this problem, just import the Ant Design CSS file into the src/main.js file, the content of the file is as follows:
from "vue" import { createApp };
import app from "./App.vue";
import "ant-design-vue/dist/antd.css";
createApp(App).mount("#app");
To avoid extra imports, we assume that ant-design-vue is registered globally in the code samples earlier in this article.
Ant Design components
The Ant Design component kit includes several elements such as buttons, lists, cards, etc., all in different colors and sizes. Icons can also be used in the main interface as well as other components. Hippo Video App, free to log in to watch movies and TV dramas and watch movies smoothly, unlocked members can watch movies stably and without ads! But let's start exploring the basics while attaching custom Vue methods and reactive data to them:
<template>
<div>
<line>
<a-col span="12">
<div v-for="(alert, i) in alerts" :key="i">
< alert
:message="alert + 'message'"
description="Lorem is a pain in the ass."
:type="alert"
/>
</div>
</a-col>
<a-col span="12">
<a-button type="primary" @click="message = 'Hello!'">
{
{ information}}
</a-button>
<a-Skeleton Avatar: paragraph="{ rows: 4 }" />
</a-col>
</a-row>
</div>
</template>
<script settings>
from "vue" import { ref };
const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click me!");
</script>
The code sample above demonstrates how to use Vue 3 setup sugar syntax for simple iteration and attaching custom events to ant-design-vue components. We've developed a two-column grid system where the first column displays a button and a skeleton loader component, while the second column basically iterates through our array of alerts and uses their data to render a custom alert component.
If we run our application, we will get the following result:
form processing
Handling form data is an essential operation in any application. Here's an example of how to use ant-design-vue to create a basic form component and handle its data:
<template>
<div>
<a-form
:model="formData"
name="basic"
autocomplete="off"
@finish="onSubmit"
@finishFailed="onError"
>
< a form item
label = "username"
name="username"
:rules="[{ required: true, message: 'Please enter your username!' }]"
>
<a-input v-model:value="formData.username" />
</a-form-item>
< a form item
tag="password"
name="password"
:rules="[{ required: true, message: 'Please enter your password!' }]"
>
<a-input-password v-model:value="formData.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formData.remember">
remember me
</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">继续</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script settings>
from "vue" import { ref };
constant formData = ref({
username: "",
password: "",
Remember: Really,
});
const onSubmit = async (_formData) => {
console.log("Form submission!:", _formData);
const response = await fetch("https://some.api/process-form", {
Method: "POST",
body:_formData,
});
};
const onError = (errorInfo) => {
console.log("Failure:", errorInfo);
};
</script>
In the above code, we define a responsive object, formData with some default empty strings, and we also use v-model form binding to bind this data to our ant-design-vue form input component. We also created a custom function onSubmit and attached it to our ant-design-vue form component to submit our formData to some fictional API for processing, and an onError to handle errors that occur when validating the form any erroneous functions.
Additionally, this code sample shows how custom attributes included in the ant-design-vue component can simplify and make the form validation process accessible.
More than 200,000 developers use LogRocket to create better digital experiences Learn More→
Here is the output of the form when we run the application:
If you want to create complex forms in Vue 3, you should also read this article about v-model.
Ant design icon
Icons play an important role in making app designs richer and more attractive. The Ant Design system is conscious.
The Ant design team has also developed an external package that lets you quickly add rich icons to your application, including outline, solid, and even duotone icons.
You can easily install the icon pack in your Vue project:
npm install @ant-design/icons-vue
Here's an example of how we import three different rocket icon styles:
<template>
<div>
<Rocket Overview/>
<loaded with rockets/>
<rocket-two-tone two-tone-color="#eb2f96" />
</div>
</template>
<script settings>
import {
rocket overview,
rocket filling,
rocket dual tone,
} from "@ant-design/icons-vue";
</script>
Running this code produces the following results:
To add extra interactivity, we can also apply custom rotation and rotation properties to any icon.
<template>
<div class="center">
<rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
<reload-outlined spin />
</div>
</template>
<script settings>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>
This results in the following output:
in conclusion
Ant Design is a great tool for creating websites with ease. It is a very adaptable framework that allows you to create simple websites with a lot of flexibility. Throughout this article, we have looked at how to use the ant-design-vue package with Vue 3. We also discussed how to use ant-icon and how to handle basic form submissions.
The documentation page for the ant-design-vue package is a great starting point to learn about all the components provided