nuxt自作プラグインの作り方

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)
)}

コメント

タイトルとURLをコピーしました