ant-design-vue

What is ant-design-vue?

Ant Design Vue is a Vue.js UI library that provides a set of high-quality components and demos for building rich, interactive user interfaces. It is based on Ant Design, a popular React UI library, and offers a wide range of components that are designed to be easy to use and integrate into Vue.js applications.

What are ant-design-vue's main functionalities?

Button

The Button component is a basic UI element that can be used to trigger actions. It supports various types, such as primary, default, dashed, and danger.

<template>
  <a-button type="primary">Primary Button</a-button>
</template>
<script>
import { Button } from 'ant-design-vue';
export default {
  components: {
    'a-button': Button
  }
};
</script>

Form

The Form component is used to create and manage forms. It provides validation, layout, and submission handling features.

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="Username">
      <a-input v-model="form.username" />
    </a-form-item>
    <a-form-item label="Password">
      <a-input type="password" v-model="form.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { Form, Input, Button } from 'ant-design-vue';
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'login_form' })
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values: ', values);
        }
      });
    }
  },
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-button': Button
  }
};
</script>

Table

The Table component is used to display data in a tabular format. It supports features like sorting, filtering, and pagination.

<template>
  <a-table :columns="columns" :dataSource="data" />
</template>
<script>
import { Table } from 'ant-design-vue';
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' }
      ],
      data: [
        { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
        { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }
      ]
    };
  },
  components: {
    'a-table': Table
  }
};
</script>

Other packages similar to ant-design-vue

element-ui

Element UI is a Vue 2.0-based component library for developers, designers, and product managers. It provides a wide range of components and is known for its ease of use and comprehensive documentation. Compared to Ant Design Vue, Element UI has a more extensive set of components and is widely adopted in the Vue.js community.

vuetify

Vuetify is a Vue.js 2.0 UI library with beautifully handcrafted Material Design components. It offers a wide range of components and is known for its consistent design and ease of use. Compared to Ant Design Vue, Vuetify follows the Material Design guidelines and provides a different design aesthetic.

bootstrap-vue

Bootstrap Vue provides comprehensive and easy-to-use Bootstrap 4 components for Vue.js. It combines the power of Bootstrap with Vue.js, offering a wide range of components and utilities. Compared to Ant Design Vue, Bootstrap Vue is based on the popular Bootstrap framework and provides a more familiar design for those accustomed to Bootstrap.

README

Ant Design Vue

An enterprise-class UI components based on Ant Design and Vue.

English | 简体中文

Features

• An enterprise-class UI design system for desktop applications.
• A set of high-quality Vue components out of the box.
• Shared Ant Design of React design resources.

Getting started & staying tuned with us.

Star us, and you will receive all releases notifications from GitHub without any delay!

Environment Support

• Modern browsers. v1.x support Internet Explorer 9+ (with polyfills)
• Server-side Rendering
• Support Vue 2 & Vue 3
• Electron

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Using npm or yarn

We recommend using npm or yarn to install, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

$ npm install ant-design-vue --save

$ yarn add ant-design-vue

If you are in a bad network environment, you can try other registries and tools like cnpm.

Links

• Home page
• Vue
• Ant Design Of React

Ecosystem

Project	Description
vue-ref	You can use the callback to get a reference like react
ant-design-vue-helper	A vscode extension for ant-design-vue
vue-cli-plugin-ant-design	Vue-cli 3 plugin to add ant-design-vue
vue-dash-event	The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase)
@formily/antdv	The Library with Formily and ant-design-vue
@ant-design-vue/nuxt	A nuxt module for ant-design-vue

Donation

ant-design-vue is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. You can support us in any of the following ways:

• Patreon
• opencollective
• paypal
• 支付宝或微信

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

More Sponsor (From Patreon、alipay、wechat、paypal...)

Contributors

Thank you to all the people who already contributed to ant-design-vue!

This project is tested with BrowserStack.