Vue에서 플러그인 사용 방법 간단 정리

Vue에서 플러그인 사용 방법 간단 정리

📌 플러그인

-  Vue에서 플러그인은 일반적으로 Vue의 전역 수준(앱 레벨)의 기능을 추가할 때 사용하며, 정의된 범위는 없다.

 

 플러그인 사용 시나리오

(1) app.component()로 여러개의 전역 컴포넌트를 등록하려고 할 때

(2) app.directive()로 여러개의 커스텀 디렉티브를 등록하려고 할 때

(3) app.provide()로 앱 전체에 메서드 또는 데이터를 주입하려고 할 때

(4) app.config.globalProperties로 전역 애플리케이션 인스턴스에 속성 또는 메서드를 추가하려고 할 때

(5) 위의 몇가지 조합을 수행하는 라이브러리를 설치하려고 할 때 (ex: vue-router)

 

 

플러그인 작성 방법1 - install 메서드를 가진 객체 활용

const myPlugin = {
    install(app, options) {
    	// ...
    }
}

// main.js
import myPlugin from './plugins/obj';
const app = createApp({})
app.use(myPlugin, { // options  })

- 플러그인은 별도의 파일로 생성하여 내보내는 것이 좋다.

- 플러그인은 install() 메서드를 갖고있는 객체나 단순한 설치 함수로 작성할 수 있다.

- 작성한 플러그인은 app.use()로 전역 전달한다.

※ app.use()를 통해 전역 설치한 플러그인의 매개변수는 app의 인스턴스와 options이 전달된다.

 

 

플러그인 작성 방법2 - 단순 설치 함수 활용

(1) 단순한 설치 함수로 작성

function funcPlugin(app, options) {	//... }

 

(2) 작성한 플러그인 전역 등록 

//main.js
import funcPlugins from './plugins/func';
const app = createApp(App);
app.use(funcPlugins, { // options });

 

 

플러그인에서 Provide/Inject 활용

- 컴포넌트 인스턴스는 script setup 라이프사이클 이후에 생성이 된다.

- 그래서 setup에서는 플러그인을 사용하지 못하고 created 훅부터 사용이 가능하다.

- setup에서 활용하기 위해서 Provide와 Inject를 활용한다.

 

(1) Provide

export default {
    install(app) {
        const person = {
        	name: '테이',
        };

        // 위 객체를 애플리케이션 전역으로 추가
        app.config.globalProperties.$person = person;

        // 주입하기
        app.provide('person', person);
    },
};

 

(2) Inject

// 아무 컴포넌트의 setup에서 컴포넌트 인스턴스 가져오기
<script setup>
    const person = inject('person');
    console.log(person.name);
</script>