vue-headで動的にhead metaを変えたときのメモ

背景

vueを使っててタグ内のタグを動的に追加する必要があったので、vue-headで対応したときのメモです。
※説明に公式のドキュメントをかぶる点あり。

GitHub - ktquez/vue-head: Manager the meta information of the head tag, a simple and easy way

作業

取り込み

<script src="https://cdn.rawgit.com/ktquez/vue-head/master/vue-head.js"></script>

JS

• headパラメータを追加して、追加するmetaを定義
• vue側のdataを使いたい場合は、headはfunctionじゃないとだめ。
• 「this.$emit('updateHead');」しないとhtmlへ変化が更新されない。

new Vue({
  el: '#hoge',
  data () {
    return {
      x: {},
    };
  },
  
  head: {
     meta () {
       return [
          { name: 'og:foo', content: this.x },
       ];
     },
  },
  
  mounted () {
    axios.get('/api')
             .then(res => { this.x = res.x; });    
  },
    
  updated () {
    this.$emit('updateHead');
  },

まとめ

ここまでやったけど、動的に追加したmetaタグを使ってくれないサービスがあるので注意（twitterのcardとか）(´・ω・`)