vue3のmyPluginをtypescriptで作る

nuxt3jsの場合もほぼ同じような作りです。

以下のようなtslintが反応する場合は、declare moduleが足りてない。

プロパティ '$myPlugin' は型 '{ $: ComponentInternalInstance; ...' に存在しません。ts(2339) 

main.ts

import App from '@/App.vue';
import { createApp } from 'vue';

import myPlugin from '@/plugins/myPlugin'

const app = createApp(App);
app.use(myPlugin);

app.mount('#app');

plugins/myplugin.ts

import { type Plugin } from 'vue';

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

const myFunctions = (key: string) => key + ':myplugin';

// for vue template
const myPlugin: Plugin = {
  install (app, options?: { [key: string]: any }) {
    app.config.globalProperties.$myplugin = (key: string) => myFunctions(key);
    app.provide('$myplugin', options);
  }
};

// for composables
export const $myplugin = (key: string): string => myFunctions(key);

export default myPlugin;

index.vue

<script setup lang="ts">
import { $myPlugin } from '@/plugins/myPlugin'
console.log($myplugin('aaa'))
</script>

<template>
  <div> {{ $myplugin('aaa') }} </div>
</template>