【Nuxt.js】Copyrightで今年の年を自動で表示させる

年明けにCopyrightの年号を変えるのは毎回面倒なので、便利な方法としてJavascriptで自動更新する方法があります。
Javascriptで自動的に変える方法は調べたらよく出てくるのですが、Vue.jsで実装されたものが出てこなかったのでその実装方法をまとめておきます。

JavaScriptで年号表記を自動更新

まずは定番、JavaScriptで年号表記を自動更新する方法

index.html

&copy; <script>document.write(new Date().getFullYear());</script> Company.

こちらをCopyrightの部分に埋め込めば2020年なら

© 2020 Company.

と表示されます。

Vueで書いてみよう

createdで現在の年数を取得し、nowに保存し出力する。

index.vue

<template>
  <p class="copyright">
   &copy; {{ now }} Company.
  </p>
</template>

<script>
export default {
  data: () => {
    return {
      now: '' //取得した年数を格納
    };
  },
  created () { //年数を取得
    const d = new Date()
    this.now = d.getFullYear()
  }
}
</script>

するとこのように出力されます。

index.html

<p class="copyright">© 2020 Company.<p>

v-htmlでまとめる

更にdataに前後のコピーライトのテキストをセットしv-htmlで出力するやり方もあります。

index.vue

<template>
  <p class="copyright" v-html="copy + ' ' + now + ' ' + copyright"></p>
</template>

<script>
export default {
  data: () => {
    return {
      copy: '&copy;',
      now: '',
      copyright: 'Company.'
    };
  },
  created () {
    const d = new Date()
    this.now = d.getFullYear()
  }
}
</script>

注意：
©はHTML特殊文字なので{{}}やv-textではそのまま出力されてしまうのでv-htmlにしないと変換されません。

テンプレートリテラルで書いた場合

index.vue

<template>
  <p class="copyright" v-html="`${copy} ${now} ${copyright}`"></p>
</template>

<script>
export default {
  data: () => {
    return {
      copy: '&copy;',
      now: '',
      copyright: 'Company.'
    };
  },
  created () {
    const d = new Date()
    this.now = d.getFullYear()
  }
}
</script>