Vue.jsでソーシャルボタンを設置する「vuesocial」

2020年4月27日

vuesocialとは

vuesocialは、Vue.jsを使ってソーシャルボタンを設置するコンポーネントライブラリです。

【動画サイズ：41KB】

環境

Vue	2.6.10
vuesocial	0.1.2

インストール

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

npm

npm install @growthbunker/vuesocial

yarn

yarn add @growthbunker/vuesocial

CDN

<script src="https://cdn.jsdelivr.net/npm/@growthbunker/[email protected]/dist/vuesocial.min.js"></script>

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

https://github.com/growthbunker/vuesocial

導入手順

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

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

import vuesocial from "@growthbunker/vuesocial"

（2）UMDの場合

なし

2.メソッドを設定

iconPathにアイコンの設置ディレクトを記載する。
今回はサンプルで、Githubの画像を直接参照してしまう。
本来は、Gitディポジトリのasset内に格納してあるSVGファイルを使用する。
https://github.com/growthbunker/vuesocial/tree/master/assets/networks

new Vue({
  el: '#app',
  data: {
    iconPath:'https://raw.githubusercontent.com/growthbunker/vuesocial/09bfd3fa5befaf32a8bf341428929cc04b5ec581/assets/networks/'
  }
});

3. テンプレートを準備

<gb-social-button> を設置する。
networkに使用したいソーシャルを設定する。
UMDを使用する場合は、icon-pathを使用して、アイコンの設置ディレクトを明示する必要がある。

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

<div id="app">
  <gb-social-button
    :icon-path="iconPath"
    network="wordpress"
    size="small"
    theme="light"
  >
    WordPress
  </gb-social-button>
  <gb-social-button
    :icon-path="iconPath"
    network="facebook"
    size="small"
    theme="light"
  >
    FaceBook
  </gb-social-button>
  <gb-social-button
    :icon-path="iconPath"
    network="twitter"
    size="small"
    theme="light"
  >
  Twitter
  </gb-social-button>
</div>