[Hematemesis Summary] 20+ useful Vue component libraries, come and collect them!

This article summarizes and shares with you more than 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 explore some of the most common vue js components. You can collect it.

Table Class

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. In addition, Vue Tables 2 is constantly growing, improving, and gaining new features.

Features

• Optional rows and sticky headers
• 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 that can load and display table content and support merging Items, statistics, row and column dragging, etc.

At the same time, it supports processing of loaded table pages: adding/deleting rows/columns, merging cells, etc.

Additionally, 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

• Multiple column sorting
• Non-continuous selection
• Filtering data and validating 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/huangshuwei/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

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 SX to develop custom components to provide more flexible functions. Plus, universal registration allows it to be used within any application, even React. It has several features:

Completely written 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) plugins 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.

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 the 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 the Vue implementation of react-content-loader.

• Fully customizable: you can change color, speed and size

• Create your own loadout: Easily create your customization using online tools Loading

• You can use it now: there are already many presets

• Performance

Epic Spinners

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

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

Vue Radial Progress

Address: https://github.com/wyzant-dev/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.

Features

• Each icon is designed according to unified standards, with perfect pixel alignment;
• The design style is consistent, which completely defeats 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.

Vue Material Design Icons

Address: https://github.com/robcresswell/vue-material-design-icons

A single file component SVG Material Design icon collection. Additionally, this library is a collection of Vue single-file components for rendering Material Design icons. Additionally, it includes some CSS to help make scaling the icon a little easier.

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/Justineo/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 encapsulation of Chart.js, allowing users to easily use Chart.js in Vue to 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. In addition, 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.

Original address: https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556

Author: lindelof

(Learning video sharing: vuejs tutorial, web front-end)

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