vue3 typescript composition api 전역 함수 만들기

가장 단순하게 사용할 수 있는 console.log() 메서드를 $sendConsole() 이라는 이름으로 래핑해본다.

 

helpers.ts

import type {App} from 'vue';

const helpers = {
	$sendConsole(msg: string): void {
    	console.log(msg);
    }
};

declare module '@vue/runtime-core' {
	interface ComponentCustomProperties {
    	$sendConsole: (msg: string) => void;
    }
}

export default {
	install(Vue: App) {
    	Vue.config.globlaProperties.$sendConsole = helpers.sendConsole;
    }
}

 

 

MyComponents.vue

<script setup lang="ts">
</script>

<template>
	<button @click="@sendConsole('console test')">콘솔찍기</button>
</template>