[vue] plugin 제작/실행

본 포스팅은 vue3를 기준으로 작성하였습니다.

 

vue에서 전역함수를 사용하기 위한 방법 중 하나로 plugin이 있다.

짧게 사용법을 정리

 

먼저 플로그인 파일을 작성한다.

 

//plugin/add.js

export default {
    install: (app) => {
        // inject a globally available $translate() method
        app.config.globalProperties.$add = (key,key2) => {
        // retrieve a nested property in `options`
        // using `key` as the path
        return key+key2
        }
    }
}

나는 $add라는 함수를 작성하였고

인자를 두 가지 받아 더해 반환하는 간단한 함수이다.

이 플러그인을 사용하려면 main.js에서 등록을 해주어야 한다.

 

//main.js

import { createApp } from 'vue'
import App from './App.vue'
import addPlugin from './plugin/add'

createApp(App).use(addPlugin).mount('#app')

 

그 다음 사용해주면 됨

 

//App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  {{$add(5,2)}}
</template>

 

 

===========================================================

 

main.js 코드를 수정해 plugin을 사용할때마다 공통인자를 추가로 보낼 수 도 있음.

 

//main.js

import { createApp } from 'vue'
import App from './App.vue'
import addPlugin from './plugin/add'

createApp(App)use(addPlugin,[3,7]).mount('#app')

//add.js

export default {
    install: (app,options) => {
            app.config.globalProperties.$add = (key,key2) => {
                if(key) {
                    return key+key2;
                } else {
                    return options[0]+options[1];
                }
            }
    }
}

install의 인자(options)들은 main.js에서 use메소드를 호출할때 보내진다.