From the public account: front-end charging treasure
Today, I would like to recommend several popular and practical Vue.js libraries!
1. State Management
(1)Pine
Pinia is the latest generation of lightweight state management library for Vue. It works with Vue 2.x and Vue 3.x. It is a state repository redesigned by Vue official members in November 2019, which allows you to share state across components/pages, and is responsive, similar to Vuex.
Github: https: //github.com/vuejs/pinia
(2) Vuex
Vuex is a state management pattern developed specifically for Vue.js applications. It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner.
Github: https: //github.com/vuejs/vuex
(3)vuex-persist
vuex-persistedstate is a Typescript-enabled Vuex plugin that enables you to persist your application's state to persistent storage, such as Cookies or localStorage.
Github:https://github.com/championswimmer/vuex-persist
2. Form
(1)You choose water
vee-validate is a form validation library for Vue.js that allows validating input and building better form UIs in a familiar declarative style or using composed functions.
Github: https://github.com/logaretm/vee-validate
(2)vue-form-making
vue-form-making is a visual form designer based on vue and element-ui. It uses the latest front-end technology stack and has a built-in i18n internationalization solution, which makes form development simple and efficient.
Github:https://github.com/GavinZhuLei/vue-form-making
(3)FormKit
FormKit is a form authoring framework for Vue developers that makes building high-quality production-ready forms 10x faster.
Github:https://github.com/formkit/formkit
3. Documentation
(1)VitePress
VitePress is the successor of VuePress, built on top of vite. Currently, it is in alpha stage. It's ready for documentation out-of-the-box, but configuration and theme APIs may still change between minor releases.
Github:https://github.com/vuejs/vitepress
(2)VuePress
VuePress is a lightweight Vue-based static site generator with a default theme optimized for writing technical documentation. It was created to meet the needs of Vue's own subproject documentation.
Github:https://github.com/vuepress/vuepress-next
(3)Gridsome
Gridsome is a Jamstack framework built on Vue.js that makes it easy for developers to build statically generated websites and apps that are inherently fast.
Github:https://github.com/gridsome/gridsome
4. Test
(1)Gear
Vitest is an extremely fast unit testing framework powered by Vite. It is consistent with Vite's configuration, converters, parsers and plugins, with out-of-the-box TypeScript / JSX support.
Github:https://github.com/vitest-dev/vitest
(2)Yes
Jest is a comprehensive JavaScript testing solution with a focus on simplicity and clarity. Suitable for most JavaScript projects.
Github:https://github.com/facebook/jest
(3)Mocha
mocha is a feature-rich javascript testing framework that runs in node.js and the browser, making asynchronous testing easy and fun. Mocha tests run continuously, allowing flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.
Github:https://github.com/mochajs/mocha
5. Visualization
(1)ChartJS view
vue-chartjs is a Vue package for Chart.js, allowing users to easily use Chart.js in Vue, creating reusable chart components very easily, very suitable for people who need simple charts and run as fast as possible . vue-chartjs abstracts the basic logic, and also exposes the Chart.js object, allowing users to gain maximum flexibility. It supports Vue 3 and Vue 2.
Github:https://github.com/apertureless/vue-chartjs
(2)Apache ECharts
Apache ECharts is a Javascript-based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts. It's written in pure JavaScript and based on zrender, a brand new lightweight canvas library.
GitHub: https://github.com/apache/echarts
(3)View-ECharts
Vue-ECharts is a Vue.js component of Apache ECharts. Use Apache ECharts 5 and support Vue.js 2/3 at the same time.
Github:https://github.com/ecomfe/vue-echarts
(4)Three
Trois is a Vue 3 visualization library based on Three.JS, a popular WebGL library. Three.JS has great support for both desktop and mobile devices. This library allows us to easily create 3D effects for websites using VueJS components.
Github:https://github.com/troisjs/trois
6. Components
(1)Vue Grid Layout
vue-grid-layout is a grid layout system, similar to Gridster, for Vue.js.
Github:https://github.com/jbaysolutions/vue-grid-layout
(2)Vue Draggable
Vue Draggable is a Vue drag and drop component based on Sortable.js.
Github:https://github.com/SortableJS/Vue.Draggable
(3)Tower View
Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide users through your application.
Github:https://github.com/pulsardev/vue-tour
(4)Swiper.js
Swiper is a free and lightweight mobile device touch slider framework that uses hardware accelerated transitions. Mainly used with mobile websites, web applications, and native applications.
Github: https://github.com/nolimits4web/swiper
(5)vue-easytable
This library provides a fully functional and highly customizable table component/datagrid. It supports many features like virtual scrolling, column pinning, header pinning, header grouping, filters, sorting, cell ellipsis, row expansion, row checkboxes, etc.
Github:https://github.com/Happy-Coding-Clans/vue-easytable
7. UI components
(1)Element Plus
Element Plus, a set of Vue 3.0-based component libraries for developers, designers and product managers prepared by Ele.me's front-end team, Element Plus is a Vue3-based component library for designers and developers, providing Supporting design resources to help your website take shape quickly.
GitHub:https://github.com/ElemeFE/element
(2)Vuetify
Vuetify is a well-built UI component library based on Vue.js, and the entire UI is designed in Material style. It allows developers without any design skills to create a stylish Material style interface.
GitHub:https://github.com/vuetifyjs/vuetify
(3)Vant
Vant is a set of lightweight and reliable mobile component library. Through Vant, you can quickly build pages with a unified style, improve development efficiency, and support Vue 3.
Github:https://github.com/youzan/vant
(4)Naive UI
Naive UI is a front-end UI component library developed based on the relatively new Vue 3.0/TypeScript technology stack.
Github:https://github.com/TuSimple/naive-ui
8. Animation
(1)Animate.css
animate.css is a CSS collection of animation effects made using CSS3 animation, which presets many commonly used animations and is very easy to use.
GitHub:https://github.com/animate-css/animate.css
(2)Greensock
GreenSock is a JavaScript animation library for easily animating HTML elements. Used to create high-performance, zero-dependency, cross-browser animations, claimed to be used in over 4 million websites.
Github:https://github.com/greensock/GreenSock-JS/
(3)Popmotion
Popmotion is a 12KB JavaScript motion engine that can be used for animation, physics and input tracking. Native DOM support: CSS, SVG, SVG paths and DOM attributes are supported out of the box.
Github:https://github.com/Popmotion/popmotion
(4)Kinesis view
Vue Kinesis supports easy creation of complex interactive animations using Vue.js, which supports Vue 3.
Github:https://github.com/Aminerman/vue-kinesis
9. Icons
(1)IconPark
IconPark provides more than 2400 high-quality icons, and also provides a description of the meaning and source of each icon, which is convenient for developers to use. In addition, the website can also customize the icon, which is different from other icon sites. The icon library is an open source icon library of technology-driven icon styles under ByteDance.
Github:https://github.com/bytedance/iconpark
(2)Font Awesome
Font Awesome provides scalable vector icons, which can be changed using all the features provided by CSS, including: size, color, shadow or any other supported effects.
Github:https://github.com/FortAwesome/Font-Awesome
(3)Ionicons
Ionicons is a completely open source icon set. It is a built-in icon library of the well-known hybrid development framework Ionic Framework. It contains 1300 high-quality icons with elegant design and uniform style, which can meet most business scenarios.
Github:https://github.com/ionic-team/ionicons
(4)Bootstrap Icons
Bootstrap Icons is Bootstrap's open source SVG icon library, originally custom designed and built for its components (from form controls to navigation) and documentation, and now free to use in any project.
Github:https://github.com/twbs/icons
10. Rich Text Editor
(1)Tiptap
Tiptap is a Vue-based renderless rich text editor based on Prosemirror, fully extensible and renderless. Custom nodes can be easily added as Vue components. Use renderless components (functional components) for almost complete control over markup and styling. The appearance of the menu or where it appears in the DOM. This is entirely up to the user.
GitHub:https://github.com/ueberdosis/tiptap
(2)Quill.js
Quill.js is a rich text editor with cross-platform and cross-browser support. With its extensible architecture and expressive API, it can be fully customized to meet individual needs.
GitHub:https://github.com/quilljs/quill/
(3)TinyMCE
TinyMCE is a popular rich text editor. Its goal is to help other developers build elegant web content solutions. It is easy to integrate and can be deployed in cloud-based, self-hosted or hybrid environments. This setup makes it possible to incorporate frameworks such as Angular, React, and Vue. It can also be extended with more than 50 plugins, each with more than 100 customization options.
GitHub:https://github.com/tinymce/tinymce
(4)CKEditor 5
CKEditor is a powerful rich text editor framework with features like modular architecture, modern integration and collaborative editing. It is extensible through a plugin-based architecture, which allows the introduction of necessary content processing functionality. It's written from the ground up in ES6 and has excellent webpack support. Native integrations with Angular, React, and Vue.js are available.
GitHub:https://github.com/ckeditor/ckeditor5
11. Server-side rendering
(1)Nuxt.js
Nuxt.js is a general application framework based on Vue.js. Through the abstract organization of client/server infrastructure, Nuxt.js mainly focuses on UI rendering of applications. It presets various configurations needed to develop server-side rendered applications using Vue.js.
Github:https://github.com/nuxt/nuxt.js
(2)SSR
The ssr framework is an out-of-the-box server-side rendering framework created for front-end frameworks in server-side rendering scenarios. It is serverless-oriented and supports React, Vue2, and Vue3.
Github:https://github.com/zhangyuang/ssr
(3) Vue-meta
Vue-meta is a plugin for Vue.js that helps you manage HTML metadata in Vue.js components with SSR support. Vue-meta makes managing your app's metadata simple using Vue's built-in responsiveness.
Github:https://vue-meta.nuxtjs.org/
12. Data Acquisition
(1)Axios
Axios is a promise-based network request library for node.js and the browser.
Github:https://github.com/axios/axios
(2)vue-resource
Vue-resource is a plug-in for Vue.js, which can initiate requests and process responses through XMLHttpRequest or JSONP.
Github:https://github.com/pagekit/vue-resource
(3)vue-axios
vue-axios is a small library that integrates axios into Vuejs.
Github:https://github.com/imcvampire/vue-axios
13. Build tools
(1)Fast
Vite is a next-generation front-end development and build tool. Vite aims to provide out-of-the-box configuration, while its plug-in API and JavaScript API bring a high degree of extensibility and complete type support.
Github:https://github.com/vitejs/vite
(2)Webpack
webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it internally builds a dependency graph that maps to each module required by the project and generates one or more bundles.