0songha0

Vue 플러그인 사용법 / 전역 컴포넌트, 리소스, 커스텀 디렉티브 등록 방법

Vue 플러그인이란?

Vue 애플리케이션에 전역 기능 및 객체 등을 추가하는 확장 도구입니다.
Vue Router, Vuex, Pinia 등도 Vue 플러그인입니다.

Vue 커스텀 플러그인 생성 방법

Vue 플러그인 JS 파일은 /src/plugins 폴더 안에 작성하는 것이 관례입니다.

플러그인 객체 정의 방법

const 플러그인객체명 = {
  install(app, options) {
    // app : Vue 애플리케이션 인스턴스
    // options : 플러그인 설치 시 넘긴 옵션 파라미터

    // 플러그인 설치 시 자동 실행
  }
}

export default 플러그인객체명;

Vue 플러그인을 객체 형태로 작성 시, install 함수를 파라미터로 사용해야 합니다.

플러그인 함수 정의 방법

function 플러그인함수명(app, options) {
  // 플러그인 설치 시 자동 실행
}

export default 플러그인함수명;

Vue 플러그인 설치 방법

import { createApp } from 'vue';
import App from './App.vue';
import 플러그인객체명 from './plugins/플러그인객체파일명';
import 플러그인함수명 from './plugins/플러그인함수파일명';

const app = createApp(App);
app.use(플러그인객체명); 또는 app.use(플러그인객체명, {파라미터키 : 값});
app.use(플러그인함수명);
app.mount('#app');

main.js 파일 app 인스턴스에 플러그인 사용 등록하면 전역에서 사용할 수 있습니다.

Vue 플러그인 사용법

전역 속성 및 메서드 추가 방법

const 플러그인객체명 = {
  install(app, options) {
    // 플러그인 설치 시 자동 실행

    const 객체명 = {
      키: '값',
      함수명() {
        console.log(this.키);
      },
      ...options // 플러그인 설치 시 받은 파라미터도 객체에 등록 가능 (기존에 같은 키가 있으면 값이 덮어씌워짐)
    };

    app.config.globalProperties.$객체명 = 객체명;
  }
}

위와 같이, app.config.globalProperties 속성에 객체를 추가하여 플러그인을 정의합니다.
해당 플러그인을 Vue 앱 인스턴스에 사용 등록하면 앱 실행 시 자동 실행됩니다.

전역 속성 및 메서드 사용법

<template>
  <h2></h2>
</template>
<script>
export default {
  created() {
    // Options API created 라이프사이쿨 훅에서 전역 속성 사용 예시
    console.log(this.$객체명.키);

    this.$객체명.함수명();
  }
}
</script>
<script setup>
</script>

Options API에서 setup 이후, 컴포넌트가 생성되면 this로 전역 속성을 사용할 수 있습니다.

전역 리소스 추가 방법

const 플러그인객체명 = {
  install(app, options) {
    // 플러그인 설치 시 자동 실행

    const 객체명 = {
      키: '값',
      함수명() {
        console.log(this.키);
      }
    };

    app.provide('객체명', 객체명);
  }
}

위와 같이, app 인스턴스 provide 함수로도 전역 리소스를 등록할 수 있습니다.
main.js에서 앱 인스턴스에 플러그인을 설치하면 적용됩니다.

전역 리소스 사용법

<template>
  <h2></h2>
  <button @click="객체명.함수명">버튼명</button>
</template>
<script setup>
const 객체명 = inject('객체명');
console.log(객체명.키);
</script>

플러그인에서 provide로 등록한 전역 리소스는 inject 함수로 받을 수 있습니다.

글로벌 컴포넌트 추가 방법

import App컴포넌트명1 from '@/components/app/App컴포넌트명1.vue';
import App컴포넌트명2 from '@/components/app/App컴포넌트명2.vue';

export default {
  install(app) {
    app.component('App컴포넌트명1', App컴포넌트명1);
    app.component('App컴포넌트명2', App컴포넌트명2);
  },
}

/src/plugins 폴더 안에 global-components.js 플러그인 파일 생성 후,
app 인스턴스 component 함수로 여러 컴포넌트에서 사용할 전역 컴포넌트들을 등록합니다.
main.js에서 플러그인을 설치하면, 각 컴포넌트에서 전역 컴포넌트들을 import문 없이 사용할 수 있습니다.

전역 커스텀 디렉티브 추가 방법

전역 커스텀 디렉티브 객체 정의 방법

export default {
  mounted(el) {
    // mounted 시, input DOM 엘리먼트를 받아서 포커스 시키는 커스텀 디렉티브 예시
    el.focus();
  }
}

src/directives 폴더 안에 커스텀디렉티브명.js 파일을 정의합니다.
커스텀 디렉티브를 객체 형태로 정의하면 mounted, updated 등 여러 훅을 사용할 수 있습니다.

전역 커스텀 디렉티브 함수 정의 방법

export default function(el, binding) {
  // v-커스텀디렉티브명="값" 형태로 넘긴 값을 DOM 엘리먼트 CSS로 적용하는 커스텀 디렉티브 예시
  el.style.color = binding.value;

  // 객체 값 사용 : binding.value.키1, binding.value.키2
  // 전달인자 사용 : binding.arg
  // 수식어 사용 : binding.modifiers
}

src/directives 폴더 안에 커스텀디렉티브명.js 파일을 정의합니다.
커스텀 디렉티브를 함수 형태로 정의하면 mounted 훅만 사용할 수 있습니다.

전역 커스텀 디렉티브 등록 방법

import { createApp } from 'vue';
import App from './App.vue';
import 커스텀디렉티브명 from './directives/커스텀디렉티브명.js';

const app = createApp(App);
app.directive('커스텀디렉티브명', 커스텀디렉티브명);
app.mount('#app');

위와 같이, main.js에서 app 인스턴스 directive 함수로 커스텀 디렉티브를 전역 등록할 수 있습니다.

전역 커스텀 디렉티브 다중 등록 플러그인 정의

import 커스텀디렉티브명1 from './directives/커스텀디렉티브명1.js';
import 커스텀디렉티브명2 from './directives/커스텀디렉티브명2.js';

export default{
  install(app) {
    app.directive('커스텀디렉티브명1', 커스텀디렉티브명1);
    app.directive('커스텀디렉티브명2', 커스텀디렉티브명2);
  }
}

src/plugins 폴더 안에 global-directives.js 플러그인 파일을 정의합니다.
main.js에서 플러그인을 설치하면, 여러 커스텀 디렉티브를 한번에 전역 등록할 수 있습니다.

최신 글