Vue Social Sharingをv2からv3にアップデートした時の話

  • VueJS
  • NuxtJS

はじめに

2020/10上旬頃にVue Social Sharingのバージョン2からバージョン3のメジャーアップデート版がリリースされたので、アップデートしてみました。(実は5月からベータ版は出てたらしい)

仕様の変更に伴い、利用方法も変わっていたので軽く紹介しようと思います。

バージョン2

バージョン2をNuxt.jsで利用する場合は次のような感じでpluginsディレクトリ下にJSファイルを作成して、nuxt.config.jsにある`plugins`オプションに記述してコンポーネントを利用できるようにしていたかと思います。

// plugins/vue-social-sharing.js
import Vue from 'vue'
import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing)
// nuxt.config.js
export default {
  plugins: [
    '@/plugins/vue-social-sharing',
  ],
}

あとはバージョン2の時のREADME.mdにあるように...

📑 https://github.com/nicolasbeauvais/vue-social-sharing/tree/v2.4.7

<social-sharing><network>コンポーネントを利用する感じでした。

ここでは実際にコンポーネントを利用する例のコードは書かないので、気になる方は上記のリンクページをご覧いただければと思います。

バージョン3

バージョン3からは導入設定やコンポーネント構成もシンプルになりました。

📑 https://github.com/nicolasbeauvais/vue-social-sharing/tree/v3.0.2

pluginsでわざわざ登録せず、nuxt.config.jsで次のように記述すれば導入できます。

// nuxt.config.js
export default {
  modules: [
    'vue-social-sharing/nuxt',
  ],
}

コンポーネントは、<social-sharing><network>の2つは使わず、<share-network>の1つだけを利用します。

コンポーネントのプロパティや内容はREADME.mdをご覧いただければと思います。

以下に、利用例のコードを示します。

<share-network
  network="line"
  url="https://example.com"
  title="サンプル記事"
  description="サンプルです。"
>
  LINEで共有する
</share-network>

おわりに

ここではバージョン2とバージョン3での利用方法について記述しました。

バージョン2のときに比べて、構成がシンプルになりました。プロパティとかは基本的に変わっていないようでした。

しかし、利用するコンポーネントは変わっているので、アップデート時にはご注意ください。バージョン2の時のコンポーネントを使っているとエラーになります。

また、Vue Social Sharingについて検索すると、バージョン2の時の仕様で説明している記事がちらほらあるのでご注意ください。

今後、変わることもありうるのでリポジトリのREADME.mdに目を通していくのがよいかと思います。あくまで参考程度で。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚