10 common Vue3 plug-ins that improve development efficiency (come and collect them)

This article summarizes and shares with you some useful Vue plug-ins, which can help developers improve development efficiency and solve the needs of various scrolling scenarios on the mobile terminal. I hope it will be helpful to everyone!

1. vue-multiselect-next

Vue.js’s universal selection/multi-select/marker component

project And documentation address: https://vue-multiselect.js.org/

For the installation of Vue 3, please refer to the readme file in Github for the latest instructions. (Learning video sharing: vuejs tutorial)

2, vue-print-nb

is used for printing, simple , fast, convenient and lightweight instruction wrapper

Github address: https://github.com/Power-kxLee/vue-print-nb

Online DEMO: https://power-kxlee.github.io/vue-print-nb/dist/index.html

3, vue-i18n-next (Vue3 international Internationalization plug-in)

i18n is a relatively mature internationalization library on the market, and vue-i18n is a Vue.js internationalization plug-in, which embeds the language switching function in the vue application. Each language that has been imported into the project can be switched.

vue-i18n-nex is the Vue i18n 9 plug-in library for Vue 3.

Official address: https://vue-i18n.intlify.dev/

4、vue-cropper

Simple vue image cropping plug-in

Project address: https://github.com/xyxiao001/vue-cropper

Demo address: http ://github.xyxiao.cn/vue-cropper/example/

##5、Vue Grid Layout

Grid layout system of Vue.js

Chinese official website: https://jbaysolutions.github.io/vue-grid-layout/zh/

Vue Grid Layout is a grid layout system similar to Gridster, suitable for Vue.js, inspired by React Grid Layout.

Features:

• Dragable

• Resizable

• Static components (cannot be dragged and resized)

• Boundary checking when dragging and resizing

• Avoid rebuilding the grid when adding or removing components Grid

• Serializable and Restoreable Layout

• Automated RTL Support

• Responsive

6. Vue Qrcode Reader

A Vue.js component that allows detection without leaving the browser and decoding QR code

Official website: https://gruhn.github.io/vue-qrcode-reader/

Vue QRcode Reader is a set of Vue.js component for detecting and decoding QR (QR) codes. It allows you to detect and decode QR codes without leaving your browser, and all components are responsive. Other than that, it has close to zero styling so you can make them fit your layout. The method of use is simple and clear.

7. Makeit Captcha

is based on the slider verification code developed by Vue3 Vite Canvas, dynamically generates the verification slider, and combines the back-end secondary Verification can effectively avoid being captured and simulated verification.

The slider verification code component is often used for verification before submission of various forms.

• Official address: https://admin.makeit.vip/components/captcha
  Github: https://github.com/lirongtong/miitvip-captcha
  Npm: https://www.npmjs.com/package/makeit-captcha

##8 , vue3-clipboard

clipboard.js

of Vue 3, a paste and copy plug-in based on Vue 3, does not depend on Flash or other frameworks. Github: https://github.com/soerenmartius/vue3-clipboard

9、vue.draggable

Vue 3 drag-and-drop component based on Sortable.js

Official address: https://sortablejs.github.io/vue.draggable.next/#/simple

github address: https://github.com/SortableJS/Vue.Draggable

Features

• Supports touch devices

• Supports dragging and selecting text

• Support smart scrolling

• Support dragging between different lists

• Not jQuery For the basic

• and view model synchronous refresh

• Compatible with vue2’s country animation

• support Undo operation

• Can throw out all changes when full control is required

• Compatible with existing UI components

10. BetterScroll

Plug-in that solves the needs of various scrolling scenarios on the mobile terminal (PC has been supported).

Official address: https://better-scroll.github.io/docs/zh-CN/

BetterScroll is a key A plug-in that solves the needs of various scrolling scenarios on the mobile side (PC already supported). Its core is based on the implementation of iscroll (opens new window). Its API design is basically compatible with iscroll. On the basis of iscroll, it has expanded some features and made some performance optimizations.

BetterScroll is implemented using pure JavaScript, which means it is dependency-free.

Note:

• In BetterScroll 2.X, we split the 1.X coupled features into plug-ins to achieve on-demand loading and reduce package size. . Therefore, @better-scroll/core only provides the core scrolling capabilities. If you want to implement pull-up loading and pull-down refresh functions, you need to use the corresponding plug-in.

• BetterScroll version 2.0.4 can specify a sub-element of the wrapper as content through specifiedIndexAsContent.

(Learning video sharing: web front-end development)

The above is the detailed content of 10 common Vue3 plug-ins that improve development efficiency (come and collect them). For more information, please follow other related articles on the PHP Chinese website!