20+ practical Vue component libraries, come and collect them!

This article summarizes and shares with you 20 useful Vue component libraries, which can help developers improve development efficiency and aesthetics. I hope it will be helpful to everyone!

In this article, we will share some common vue.js components.

Table/Data Grid

---

Vue Tables-2

##Address: https://github.com/matfish2 /vue-tables-2

Vue Tables 2 aims to provide developers with a full-featured toolset to create beautiful and practical data tables with Vue. Hundreds of business software applications are using it. Additionally, Vue Tables 2 is constantly growing, improving, and gaining new features. (Learning video sharing:

vue video tutorial)

Features are as follows:

Optional rows and sticky header
• Virtual paging
• Download CSV of customer component data
• Multi-level grouping with data layer support
• Tailwind theme

Handsontable

Address: https://github.com/handsontable/handsontable/tree/master/wrappers/vue

Handsontable is a page-side table interactive plug-in. It can be used to load and display table content, and can support merged items, statistics, row and column dragging, etc.

Supports processing of loaded table pages: adding/deleting rows/columns, merging cells, etc.

Also, it works with React, Angular, and Vue. Handsontable is a JavaScript component that combines data grid functionality with the user experience of a spreadsheet. Additionally, it provides data binding, data validation, filtering, sorting, and CRUD operations.

Features are as follows:

Multiple column sorting
• Non-continuous selection
• Filter data and verify data
• Export file
• Conditional formatting
• Merge cells
• Hide rows/columns
• Context menu and comments

Ag Grid Vue

Address: https://github.com/ag-grid/ag-grid

Ag-Grid is a Data table component based on Vue.js. Among them, "ag" means "agnostic". The internal ag-Grid engine is implemented in TypeScript with zero dependencies.

ag-Grid supports Vue through a wrapper component, you can use ag-Grid in your application just like any other Vue component. It supports passing configuration through property binding and handling events through event binding. You can even use Vue components to customize the grid UI and cell content/behavior.

Vue Easytable

Address: https://github.com/Happy-Coding-Clans/vue-easytable

vue-easytable is one of the most powerful Vue table components I have ever encountered.

The table component has many built-in features, such as cell ellipsis, fixed/flexible column sizing, custom filtering, and more. It has several features:

Internationalization
• Theme customization
• Built-in theme
• Virtual scrolling
• Column fixing
• Header fixed
• Header grouping

Vue Good Table

Address: https://github.com /xaksis/vue-good-table

Vue-Good-Table is a data table component based on Vue.js, simple and clean, with sorting, column filtering, and paging and more basic functions. It has several features:

Table search and sorting
• Column filtering and paging
• Checkbox table
• Row grouping
Row Style
• Row Multiple Selection

Notification

---

##Vue Toastification

Address: https://github.com/Maronato/vue-toastification

It provides light, simple and beautiful toast tips. It has built-in Nuxt support. Moreover, it supports the new Composition API and Vue 3. We can also use JSX to develop custom components to provide more flexible functionality. Plus, universal registration allows it to be used within any application, even React. It has several features:

• Written entirely in Typescript, supports all types
• Supports RTL
• Customize everything
• Slide to close
• Create custom experiences using onClose, onClick and onMounted hooks
• Delete and update toast programmatically

Vue Toasted

Address: https://github.com/shakee93/vue-toasted

Vue Toasted is one of the best toast (prompt) plug-ins for Vue. It is trusted by many organizations such as Vue, Laravel, NuxtJS, etc. It is highly responsive, has good compatibility, is easy to use, attractive, and has rich functions, icons, actions, etc.

Vue Notifications

Address: https://github.com/se-panfilov/vue-notifications

Vue Notifications is a library-independent notification component, non-blocking.

VueNotiments connects your application with notification UI libraries. Support miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal.

Vue Awesome Notifications

Address: https://f3oall.github.io/awesome-notifications/

Awesome Notifications is a lightweight, fully customizable JavaScript Vue Awesome Notifications, which is the Vue.js version of the Awesome Notifications library.

Loader

---

Vue Wait

Address: https://github.com/f /vue-wait

Vue Wait This is a complex loader and progress management component for VUE, Vuex and Nuxt applications.

Vue Wait helps manage multiple loading states on a page without any conflicts between states. Based on a very simple idea: by managing an array (or Vuex store) with multiple loading states, let the built-in loader component listen for registered loaders and enter the loading state immediately.

Vue Content Loader

Address: https://github.com/egoist/vue-content-loader

Vue Content Loader is an SVG placeholder loader based on Vue.js, a customizable SVG component used to create placeholder loads, such as Facebook loading cards. Vue Content Loader is a Vue implementation of react-content-loader.

Epic Spinners

Address: https://epic-spinners.epicmax.co/

EpicSpinners It is a set of easy-to-use web page loading effects created with pure CSS. It also integrates Vue components and can be easily used in Vue projects. Since it is created with pure CSS, you can integrate and use it in any web page project!

Vue Radial Progress

Address: https://github.com/wyzantinc/vue-radial-progress

Vue Radial Progress This is a loader component with a radial progress bar effect. It uses svg and javascript to draw a loader with a gradient radial progress bar effect. It can be used as a loading and progress prompt.

ICONS

---

Vue Feather Icons

Address: https://github.com/ egoist/vue-feather-icons

Feather is a set of open source icon libraries for designers and developers. It is a simple and beautiful open source icon library. Each icon is designed on a 24×24 grid, emphasizing simplicity, consistency and legibility. Many front-end frameworks produced by major manufacturers have built-in icons that are free for commercial use. Its characteristics are as follows:

• Each icon is designed according to unified standards and has perfect pixel alignment;
• The design style is consistent, which is better than those patchwork icon libraries;
• Covers support for a variety of development scenarios and is very developer-friendly.

Vue Awesome

Address: https://github.com/Justineo/vue-awesome

Font Awesome is a popular icon font library. In the actual development process, we often encounter scenarios where icons need to be used. For some commonly used icons, we can find them directly in Font Awesome without a designer. use. Personally, I feel that Font Awesome's icons are quite complete. It contains most of the icons and supports various frameworks.

Charts

---

Vue Apexcharts

Address: https://github.com/apexcharts /vue-apexcharts

Apexccharts is a modern JavaScript charting library for building interactive charts and visualizations via a simple API. Vue Apexcharts is a Vue.js component of ApexCharts.

Vue Echarts

Address: https://github.com/ecomfe/vue-echarts

vue-echarts is a component library implemented based on the echarts package. You can directly install the reference according to the normal component reference method. For specific installation and reference readers can directly read the vue-echarts technical documentation.

Vue Chartjs

Address: https://github.com/apertureless/vue-chartjs

vue-chartjs is a Vue The encapsulation of Chart.js allows users to easily use Chart.js in Vue and easily create reusable chart components. It is very suitable for people who need simple charts and run them as fast as possible. vue-chartjs abstracts the basic logic and also exposes Chart.js objects, allowing users to gain maximum flexibility.

V-Charts

Address: https://github.com/ElemeFE/v-charts

V-Charts is an icon component encapsulated based on Vue2.0 and Echarts. It only needs to uniformly provide a data format that is friendly to both the front and back ends and set simple configuration items to generate common charts.

Time

---

Vue Timer Hook

Address: https://github.com/ riderx/vue-timer-hook

The Vue3 timer module is inspired by react-timer-hook. Additionally, it is a custom hook to handle timers, stopwatches and time logic/state in vue 3 components.

Vue Horizontal Timeline

Address: https://github.com/guastallaigor/vue-horizontal-timeline

Vue Horizontal Timeline is a simple horizontal timeline component made with Vue.js.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of 20+ practical Vue component libraries, come and collect them!. For more information, please follow other related articles on the PHP Chinese website!