vue3 Composition API 에서 JS plugin 추가 하기

option API 사용이 아닌 Composition API 에서 공통인 common.js 추가하고 싶을때 사용합니다.

Composition API  는 <script setup> 사용합니다.

option API 는 this.$common 사용하는 반면  Composition API 는 inject 를 사용합니다.

 

js/common.js 

사용할 컴포넌트에서 inject 에서 사용할 이름을 지정해줍니다.

app.provide('common',common) 

export default {
    install:(app) => {
        const common = {
            cc(str) { 
                console.log('>>>>>common.js111 >>>>' + str);
            },
            dd(str) {
                console.log('>>>>>common.js222 >>>>' + str);
            },
        };

        app.provide('common',common)

    }
}

 

main.js

import { createApp } from 'vue'
import './style.css'
import App from './AppChart.vue'
import store from './store'
import common from '@/js/common'
//import AfterLoginClass from './js/class/AfterLogin'
import jQuery from 'jquery'
import mitt from 'mitt'
const emitter = mitt();


const coforwardUi = createApp(App);

coforwardUi.provide('emitter', emitter)
coforwardUi.use(store);
coforwardUi.use(jQuery);
coforwardUi.use(common);
//coforwardUi.use(AfterLoginClass);

window.coforwardUi = coforwardUi;

global.$ = jQuery;


coforwardUi.mount('#app');

 

n-test.vue

 

<script setup>

import { 
    ref, 
    computed,
    onMounted,
    watch,
    inject,
} from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const bus = inject('emitter');
const $common = inject('common');
...

$common.cc('1111');
$common.dd('asd2222fadsfasdf');

 

 

참고

https://stackoverflow.com/questions/64782385/how-to-vue3-composition-api-plugin

How to: Vue3 composition API plugin

https://www.appsloveworld.com/vuejs/100/16/how-to-vue3-composition-api-plugin

[Solved]-How to: Vue3 composition API plugin-Vue.js