【Nuxt.js v2】Util関数を定義する

定義の仕方

/plugins/util.js

staticメソッドを定義したクラスを定義し、injectを使用してプロジェクト内で共通化します。

class Util {
  static sampleMethod () {
    ・・・
  }
}

export default (context, inject) => {
  inject('util', Util)
}

nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/util.js' }
  ]
}

使い方

後はプロジェクト内の各ページで、以下のようにVueインスタンス(this.)から呼び出せます。

this.$util.sampleMethod()

middleware,asyncData,fetchではVueインスタンス生成前なので、引数のcontextから呼び出せます。contextの分割代入{}で、utilを取得しましょう。($付きの名前になっています。)

// middleware
export default function ({ $util }) {
  $util.sampleMethod()
}

export default {
  // asyncData
  asyncData ({ $util }) {
    $util.sampleMethod()
  },
  // fetch
  fetch ({ $util }) {
    $util.sampleMethod()
  }
}