플러그인(Plugin) 기본 개념

Vue.js에서 플러그인은 재사용 가능한 기능을 Vue 인스턴스에 추가하는 방법입니다. src/plugins 디렉토리를 생성하고 그 안에 JS 파일을 작성하면 됩니다. 플러그인은 install() 메서드를 가진 객체로 구성되며, Vue.use()를 통해 등록됩니다.

// plugins/index.js
export default {
    install(Vue) {
        console.log('플러그인이 실행되었습니다');
        console.log(Vue); // Vue.use() 호출 시 Vue 생성자가 전달됨
    }
}

// main.js 또는 다른 파일에서 사용
import myPlugin from "@/plugins";

Vue.use(myPlugin);

커스텀 플러그인 구현하기

플러그인을 사용하면 main.js에 직접 작성해야 할 코드를 분리하여 모듈화할 수 있습니다. install(Vue){} 내부에서 다양한 전역 설정이 가능합니다.

전역 속성 및 메서드

// 모든 컴포넌트에서 this.$http로 접근 가능 (axios 인스턴스)
Vue.prototype.$http = axios;

// 모든 컴포넌트에서 this.$appName으로 접근
Vue.prototype.$appName = 'MyApp';

// 템플릿 내에서도 {{ $appName }} 형태로 사용 가능

전역 믹스인(Mixin)

Vue.mixin({
    created() {
        console.log('모든 컴포넌트의 created 훅에서 실행됩니다');
    }
});

전역 컴포넌트 등록

// 모든 컴포넌트에서 <custom-button> 사용 가능
Vue.component('custom-button', {
    template: '<button>커스텀 버튼</button>'
});

커스텀 디렉티브(Directive)

// v-focus 디렉티브 정의
Vue.directive('focus', {
    bind(el, binding) {
        el.value = binding.value;
    },
    inserted(el) {
        el.focus();
    },
    update(el, binding) {
        el.value = binding.value;
    }
});

참고: 플러그인은 Vue.use()에 전달될 때 Vue 생성자 자체를 인자로 받기 때문에, Vue의 모든 기능에 접근할 수 있습니다. 일반적으로 개발자는 직접 플러그인을 만들기보다는 서드파티 플러그인을 사용하게 됩니다.

서드파티 플러그인 사용 예

대부분의 Vue 플러그인은 Vue.use()를 통해 등록됩니다. 대표적인 예가 Vue Router입니다.

// main.js
import VueRouter from 'vue-router';

Vue.use(VueRouter);

UI 라이브러리 활용

Element UI

PC 환경에 적합한 UI 라이브러리입니다. 공식 문서를 참고하여 설치 및 사용할 수 있습니다.

// Element UI 설치 후 main.js에서 사용
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

기타 UI 라이브러리

• Vant: 모바일 환경에 최적화된 UI 라이브러리
• Element Plus: Vue 3 지원 버전의 Element UI
• iView: 또 다른 PC용 UI 라이브러리