nuxtの自作プラグインとは
nuxtの自作プラグインとはつまり関数を共通化することです。
contextとinjectを利用することでどのファイルからも呼び出し可能です。
nuxtで自作プラグインを作る方法
nuxtで自作プラグインを作る方法は以下です。
plugins/pluginA.js
export default (context, inject) => {
const pluginA = () => {
return 'pluginA'
}
inject('pluginA', pluginA);
context.$pluginA = pluginA;
}
inject引数内でpluginの名前、関数を入れて
さらにcontextメソッドの$pluginの名前に関数を入れます。
自作プラグイン利用方法
nuxt.config.js
plugins: [
'~plugins/pluginA.js'
],
pages/test.vue
methods: {
test() {
console.log(this.$pluginA)
}
}
TypeScript、compositionApiを使った場合
plugins/pluginB.ts
import { defineNuxtPlugin } from '@nuxtjs/composition-api'
class Utils {
public pluginB = () => {
return 'pluginB'
}
}
export default defineNuxtPlugin((_, inject) => {
inject('utils', new Utils())
})
declare module '@nuxt/types' {
interface Context {
$utils: Utils
}
}
defineNuxtPluginというapiを利用します。
Utilsというclassを作ってその中にpublic関数を作ります。
defineNuxtPluginの引数内でinjectします。
最後にTypeScriptの処理をinterfaceのContextにします。
test.vue
import { defineComponent, useContext } from '@nuxtjs/composition-api'
export default defineComponent({
const { $utils } = useContext()
console.log($utils)
)}
コメント