플러그인 ​

소개 ​

플러그인(plugin)은 일반적으로 Vue에 앱 수준의 기능을 추가하는 독립적인 코드입니다. 플러그인을 설치하는 방법은 다음과 같습니다:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 선택적 옵션 */
})

플러그인은 install() 메서드를 노출하는 객체이거나, 설치 함수 자체로 동작하는 함수로 정의됩니다. 설치 함수는 앱 인스턴스(instance)와 함께, app.use()에 전달된 추가 옵션(있을 경우)을 받습니다:

const myPlugin = {
  install(app, options) {
    // 앱을 구성합니다
  }
}

플러그인에 엄격하게 정의된 범위는 없지만, 플러그인이 유용한 일반적인 시나리오는 다음과 같습니다:

1. 하나 이상의 전역 컴포넌트(component) 또는 커스텀 디렉티브(directive)를 app.component() 및 app.directive()로 등록합니다.

2. app.provide()를 호출하여 앱 전체에서 주입 가능한 리소스를 만듭니다.

3. app.config.globalProperties에 속성이나 메서드를 추가하여, 전역 인스턴스 속성 또는 메서드로 사용할 수 있게 만듭니다.

4. 위의 조합이 필요한 라이브러리(예: vue-router).

플러그인 작성하기 ​

자신만의 Vue.js 플러그인을 작성하는 방법을 더 잘 이해하기 위해, i18n(국제화의 약자) 문자열을 표시하는 매우 단순화된 버전의 플러그인을 만들어보겠습니다.

먼저 플러그인 객체를 설정해봅시다. 아래와 같이 별도의 파일에 만들어 내보내면 로직을 분리된 상태로 유지할 수 있으므로, 이 방식이 권장됩니다.

export default {
  install: (app, options) => {
    // 플러그인 코드는 여기에 작성합니다
  }
}

번역 함수를 만들고자 합니다. 이 함수는 점으로 구분된 key 문자열을 받아, 사용자로부터 제공받은 옵션에서 번역된 문자열을 찾아 반환합니다. 템플릿(template)에서의 사용 예시는 다음과 같습니다:

<h1>{{ $translate('greetings.hello') }}</h1>

이 함수는 모든 템플릿에서 전역적으로 사용할 수 있어야 하므로, 플러그인에서 app.config.globalProperties에 추가해줍니다:

export default {
  install: (app, options) => {
    // 전역적으로 사용 가능한 $translate() 메서드를 주입합니다
    app.config.globalProperties.$translate = (key) => {
      // `key`를 경로로 사용하여
      // `options`에서 중첩된 속성을 가져옵니다
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

이 $translate 함수는 greetings.hello와 같은 문자열을 받아, 사용자가 제공한 설정에서 해당 번역 값을 찾아 반환합니다.

번역 키가 포함된 객체는 플러그인을 설치할 때 app.use()의 추가 매개변수로 전달해야 합니다:

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

이제 앞서 작성한 표현식 $translate('greetings.hello')는 런타임에 Bonjour!로 대체됩니다.

참고: 전역 속성 확장하기

플러그인에서 Provide / Inject 사용하기 ​

플러그인에서는 provide를 사용해 플러그인 사용자가 함수나 속성에 접근할 수 있게 만들 수도 있습니다. 예를 들어, 애플리케이션이 번역 객체를 사용할 수 있도록 options 매개변수에 대한 접근을 허용할 수 있습니다.

export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

이제 플러그인 사용자는 i18n 키를 사용하여 컴포넌트에서 플러그인 옵션을 주입할 수 있습니다:

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}

NPM용 번들링(bundling) ​

플러그인을 빌드하여 다른 사람들이 사용할 수 있도록 배포하고 싶다면, Vite의 라이브러리 모드 섹션을 참고하세요.