[Organization and sharing] 7 practical JS libraries available on vue projects

Using open source libraries to accelerate the development progress of VUE projects is a common way in modern front-end development. I usually collect some introductions to JavaScript libraries so that I can easily get them when needed. [Related recommendations: vuejs video tutorial, web front-end development]

VUE ecology has many good dependent libraries or components, which is one of the reasons for using VUE to develop front-end .

1. vueuse

This is one of the most starred libraries on GitHub, with more than 12.8k stars. This is a group based on Combined API Practical function library.

Its original intention is to make all JS APIs that do not originally support responsiveness support responsiveness, eliminating the need for programmers to write relevant code themselves.

import { useLocalStorage, useMouse, usePreferredDark } from "@vueuse/core";

export default {
    setup() {
        // tracks mouse position
        const { x, y } = useMouse();

        // is user prefers dark theme
        const isDark = usePreferredDark();

        // persist state in localStorage
        const store = useLocalStorage("my-storage", {
            name: "Apple",
            color: "red",
        });

        return { x, y, isDark, store };
    },
};

GitHub：github.com/vueuse/vueu…

2. vue-js-modal

This is An easy-to-use, highly customizable Vue.js modal library that supports two types of modals: static and dynamic. Static is explicitly defined through templates, and dynamic is generated based on the configuration passed to the "show modal" function. of. This library has over 4.2k stars on Github.

GitHub：github.com/euvl/vue-js…

3. vue-wait

This library can control various loading states on the page without any conflicts. Its core principle is to manage an array (or, optionally, a Vuex store) with multiple loading states. The integrated loader component starts listening for its registered loaders and immediately enters the loading state. This library has over 1.9k stars on Github.

GitHub：github.com/f/vue-wait

4. good-table

Table is one of the most commonly used components in software development. It is an easy-to-use and powerful data table with advanced customization capabilities, including sorting, column filtering, paging, grouping, and more. It has over 2k stars on GitHub.

GitHub: github.com/xaksis/vue-…

5. vue-notification

Display message to user Being one of the basic features of the application, this library will help in building beautiful notifications. It provides many features such as animation, custom position, custom style, and more. This library has over 2.3K stars on Github.

GitHub：github.com/euvl/vue-no…

6. tree select

As the name suggests, this is a multi-select component with nested options. It includes many features such as support for single and multiple selection of nested options, fuzzy matching, asynchronous search, lazy loading (loading data for deep options only when needed), and more. It has over 2.6K stars on GitHub.

GitHub:github.com/riophae/vue…

7. egjs-infinite grid

If you must use the network Grid layout, then this library is a great resource for infinitely arranging elements including content based on grid type.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

function getItems(nextGroupKey, count) {
    const nextItems = [];

    for (let i = 0; i < count; ++i) {
        const num = nextGroupKey * count + i;
        nextItems.push(`<div class="item"></div>`);
    }
    return nextItems;
}
const ig = new MasonryInfiniteGrid(".container", {
    gap: 5,
});

ig.on("requestAppend", (e) => {
    const nextGroupKey = (+e.groupKey || 0) + 1;

    ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();

GitHub：github.com/naver/egjs-…

（学习视频分享：vuejs入门教程、编程基础视频）

The above is the detailed content of [Organization and sharing] 7 practical JS libraries available on vue projects. For more information, please follow other related articles on the PHP Chinese website!