Yandexの共有ブロックを実装できる「vue-yandex-share」

2020年2月26日

vue-yandex-shareとは

vue-yandex-shareは、Yandexの共有ブロックコンポーネントを実装できるライブラリです。

環境

Vue	2.6.10
vue-yandex-share	0.2.1

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm i @cookieseater/vue-yandex-share --save

CDN

<script src="https://cdn.jsdelivr.net/npm/@cookieseater/[email protected]/dist/vue-yandex-share.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/CookiesEater/vue-yandex-share/

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import YandexShare from '@cookieseater/vue-yandex-share';

（2）CDNの場合

const YandexShare = window['vueYandexShare'];

2.メソッドを設定

YandexShareをcomponentsに取り込みます。

new Vue({
  el: '#app',
  components: {
    'yandex-share':YandexShare,
  },
  data: {
    service: [
      'blogger',
      'delicious',
      'digg',
      'evernote',
      'facebook',
      'gplus',
      'linkedin',
      'lj',
      'moimir',
      'odnoklassniki',
      'pinterest',
      'pocket',
      'qzone',
      'reddit',
      'renren',
      'sinaWeibo',
      'skype',
      'surfingbird',
      'telegram',
      'tencentWeibo',
      'tumblr',
      'twitter',
      'viber',
      'vkontakte',
      'whatsapp',
    ]
  }
});

3. テンプレートを準備

<yandex-share> を設置します。

servicesプロパティに上記で作成したserviceを設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <yandex-share :services="service" counter />
</div>

サンプル

>>専用ページで確認する

さいごに

Yandexの共有ブロックコンポーネントを実装できるライブラリでした。

今日はこの辺でー

カバノキ