nuxt.jsで共通関数を作る

ページとかコンポーネントで同じ関数は書きたくない共通関数でまとめたい。。。
と言うことで、

共通関数を作る

pluginsディレクトリがあるのでここにcommon.jsを作る。

plugins/common.js

export default {
  outputLog(message) {
    console.log(`LOG: ${message}`)
  }
}

共通関数を登録する

nuxt.config.jsのpluginsにcommon.jsを設定する。

nuxt.config.js

export default {
  plugins: ['@/plugins/common.js']
}

共通関数を使う

common.jsをインポートして共通関数を呼び出す。

pages/index.vue

<template>
  <div>
  </div>
</template>

<script>
import Common from '@/plugins/common'

export default {
  created {
    Common.outputLog('hello!')
  }
}
</script>

インポートをしないで使う

アプリ全体で使うしインポートがめんどくさいと思ったら

作る時

共通関数をinjectする。

plugins/common.js

export default ({ app }, inject) => {
  inject('outputLog', (message) => {
    console.log(`LOG: ${message}`)
  })
}

使う時

共通関数の前に$を付ける。

pages/index.vue

<template>
  <div>
  </div>
</template>

<script>
export default {
  created {
    this.$outputLog('hello!')
  }
}
</script>