신비한 비

vue 개발지 도움될만한 놈들이니 빨리 저장하시오~!

1. vueuse

GitHub 에서 12.8k star 를 받을 정도로 인기가 있다.

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

인기는 요정도 ? Github 4.2k star.

모달이 조금 더 쎄련된 모습으로 개발할수 있다.

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

3. vue-wait

로딩바로 유용하게 사용될 라이브러리  Github 에서 받은 star는  1.9k 개정도.

GitHub：github.com/f/vue-wait

4. good-table

소팅,필터,페이징,구룹핑 등 다양한 기능를 구현할수 있어서 자주사용된다.GitHub  의 인기는 2k star 정도

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

5. vue-notification

성공,실패,경고시 내보내는 노티들을 유용하게 다둘수 있는 놈. 전통적인 녹,황,빨 3가지 색을 사용하고 많은 기능들을 제공한다.

애니메이션 , 노출 위치 , 커스텀 양식 등등. Github에서 약 2.3k star 를 받았다.

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

6. tree select

단일선택,멀티선택,자동완성,비동기검색, 지연로딩 등등 .GitHub 인기는 약 2.6K star임.

가끔 개발자 사이트에 자신의 기술스택 선택할때 봣었는데 ...

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

7. egjs-infinite grid

그리드 사용시 강추!

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