nuxt vue-social-sharing

vue-social-sharing/nuxtでシェアボタンを動的に設定する方法

各ページで記述すればいいんだけど、面倒くさいのでLayoutでひとつ設定すればいいだけにしたい。

参考: https://note.com/fulcrum/n/na5d6a232f427

ステップ1: vue-social-sharing/nuxtをインストール

手順は割愛。nuxt.config.jsにも記述を忘れずに。(modulesの一番下に「'vue-social-sharing/nuxt'」を追加するだけ)

ステップ2: Layoutをいじる

自分の場合は次のように設定した。

<template>

<ShareNetwork

              @click="createSnsUrl"

              v-for="network in networks"

              :network="network.network"

              :key="network.network"

              :title="socialSharing.title"

              :url="socialSharing.url"

              twitter-user="afonomics"

            >

</template>

<script>

export default {

  data () {

    return {

      networks: [

        { network: 'twitter', name: 'Twitter', icon: 'twitter' },

        { network: 'facebook', name: 'Facebook', icon: 'facebook' },

        { network: 'linkedin', name: 'LinkedIn', icon: 'linkedin' }

      ],

      socialSharing: {

        url: '',

        title: ''

      }

    }

  },

  mounted () {

    this.createSnsUrl()

  },

  methods: {

    createSnsUrl () {

      this.socialSharing.url = location.href

      this.socialSharing.title = document.title

    }

  }

}

</script>

createSnsUrl のところで現在のURLとタイトルを取得する関数を定義して、moutedされたらそれが実行されるようにしているだけ。