Useful Vue.js Libraries to Accelerate Frontend Development

Using open‑source libraries to speed up Vue project development is common in modern frontend development; this article collects several useful Vue libraries.

1. vueuse

One of the most starred GitHub repositories with over 12.8k stars, vueuse provides a collection of utility functions based on the Composition API, making non‑reactive JavaScript APIs reactive.

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: https://github.com/vueuse/vueuse

2. vue-js-modal

A easy‑to‑use, highly customizable Vue.js modal library supporting both static and dynamic modals. It has over 4.2k stars on GitHub.

GitHub: https://github.com/euvl/vue-js-modal

3. vue-wait

This library manages multiple loading states without conflicts, optionally using a Vuex store. It has over 1.9k stars.

GitHub: https://github.com/f/vue-wait

4. good-table

A powerful data table component with sorting, column filtering, pagination, grouping, and other advanced customization features, with over 2k stars.

GitHub: https://github.com/xaksis/vue-good-table

5. vue-notification

Provides beautiful notifications with animation, custom positions, custom styles, etc., and has over 2.3k stars.

GitHub: https://github.com/euvl/vue-notification

6. tree select

A multi‑select component with nested options, supporting single and multiple selection, fuzzy matching, async search, lazy loading, and more, with over 2.6k stars.

GitHub: https://github.com/riophae/vue-treeselect

7. egjs-infinite-grid

If you need a grid layout, this library provides infinite arrangement of elements 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: https://github.com/naver/egjs-infinitegrid