More than 20 useful Vue component libraries, please check them out!

Author: lindelof
Translator: Front-end Xiaozhi Source: medium

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

In this article, we will explore some of the most common vue js components. You can collect a wave.

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 for creating beautiful and functional data tables with Vue. Hundreds of commercial software applications are using it. Additionally, Vue Tables 2 is constantly growing, improving, and gaining new features.

Features

Optional lines and sticky headers
virtual paging
Download CSV of customer component data
Multilevel grouping with data layer support
Tailwind theme

Handsontable

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

Handsontable is a form interaction plug-in on the page side, which can be used to load and display table content, and can support merge items, statistics, row and column dragging, etc.

At the same time, it supports the processing of the loaded table page: 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

Sort by multiple columns
non-consecutive selection
Filter data and validate data
export file
Conditional formatting
Merge Cells
hide row/column
Context menu and annotations

Ag Grid Vue

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

Ag-Grid is a data grid component based on Vue.js. where "ag" means "agnostic". The internal ag-Grid engine is implemented in TypeScript with zero dependencies.

ag-Grid supports Vue through a wrapper component, and 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 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 come across.

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

globalization
Theme customization
Built-in themes
virtual scroll
Column fixed
Fixed header
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 more basic functions such as sorting, column filtering, paging and more. It has several features:

Table search and sorting
Column filtering and pagination
Checkbox form
row grouping
line style
row multiple selection

Vue Toastification

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

It offers light, easy and pretty toast tips. It has built-in Nuxt support. Also, 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 app, even React. It has several features:

Written entirely in Typescript and supports all types
Support RTL
Customize everything
slide to close
Create custom experiences with onClose, onClick and onMounted hooks
Programmatically delete and update toast

Vue Toasted

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

Vue Toasted is one of the best toast plugins for Vue. It is trusted by many organizations such as Vue, Laravel, NuxtJS, etc. It is responsive, compatible, easy to use, attractive, rich in features, icons, actions, etc.

Vue Notifications

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

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

VueNotiments connects your app with the notification UI library. 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 conflict between states. Based on a very simple idea: by managing an array (or Vuex store) with multiple loading states, have the built-in loader component listen for registered loaders and immediately enter the loading state.

Vue Content Loader

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

Vue Content Loader is a Vue.js based SVG placeholder loader, a customizable SVG component for creating placeholder loads such as Facebook loading cards. Vue Content Loader is a Vue implementation of react-content-loader.

Fully customizable: you can change the color, speed and size
Create your own loadouts: Easily create your custom loadouts with online tools
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 web loading effects created by pure css, and at the same time, it integrates Vue components and can be easily used in Vue projects. Since it is made of 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 radial progress bar effect loader component. It uses svg and javascript to draw a loader with a gradient radial progress bar effect, which can be used as loading and progress prompts.

ICONS

Vue Feather Icons

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

Feather is a set of open source icon library 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. This free commercial icon is built into the front-end frameworks produced by many major manufacturers.

Features

Each icon is designed according to a unified standard, with perfect pixel alignment;
Consistent design style, better than those patchwork icon libraries;
It supports a variety of development scenarios and is very friendly to developers.

Vue Awesome

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

Font Awesome is a set of popular icon font libraries. We often encounter scenarios where icons need to be used in the actual development process. For some commonly used icons, we can directly find and use them in Font Awesome without a designer. Personally, I feel that Font Awesome's icons are still very complete. Most of the icons are included and support various frameworks.

Vue Material Design Icons

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

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

Charts

Vue Apexcharts

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

Apexcharts is a modern JavaScript charting library/build interactive charts and visualizations with a simple API. Vue Apexcharts is a Vue.js component for ApexCharts.

Vue Echarts

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

Vue-echarts is a component library implemented based on echarts package. It can be installed and referenced directly according to the normal component reference method. The 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, creating reusable chart components very simply, very suitable for those who need simple charts and run 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 provide a simple configuration item of data format that is friendly to both front and back ends to generate common charts.

time

Vue Timer Hook

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

Vue3 timer module inspired by react-timer-hook. Also, it's 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.

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

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

communicate with