Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（mixin編）

異なるコンポーネントから共通で利用できる関数を定義したかったので、試してみました。

今回はmixinの機能を利用しましたが、injectの機能を利用することもできるようです。
こちらについても、今度試してみようと思います。

→ 試しました
※ asyncData や fetch 等のSSR時も関数を利用できるため、こちらの方が良いかもしれません。

mixinに関数を定義する

plugins/ 内に mixin-common-methods.js というファイルを作成し、ここに関数を定義していきます。
今回は例として truncate(str, length) という、文字列が指定された文字数以上の場合は省略する関数を定義するものとします。

plugins/mixin-common-methods.js

import Vue from 'vue'

Vue.mixin({
  methods: {
    truncate(str, length) {
      return str.length <= length ? str: (str.substr(0, length) + "...");
    }
  }
})

nuxt.config.jsに設定を追加

nuxt.config.js に設定を追加します。

nuxt.config.js

plugins: [
  '@/plugins/mixin-common-methods'
],

コンポーネントからの利用

コンポーネントからは、下記のように利用することができます。

pages/index.vue

<script>
export default {
  methods: {
    hoge() {
      return this.truncate('省略したい文字列', 5);
    }
  }
}
</script>

以上！