「vue-social-sharering」とはSNSのシェアが楽に作れるライブラリです。
今回はこれを使って「twitterシェア」ボタンを手軽に作成していきます。
ボタン
ボタンをクリックすると投稿画面に遷移
codesandboxのブラウザだとtwitter投稿へのリンクがうまく作動しないので、あくまでコードサンプルとしてい参考にして下さい。
1.ライブラリをinstallする
yarn add vue-social-sharing
もしくは
npm install --save vue-social-sharing
※
version3系だとうまく表示しない場合があります。
本記事ではこちらを使っています。
"vue-social-sharing": "^2.4.6"
ついでにTwitterなどのアイコンもinstallしておきましょう。
npm install @fortawesome/fontawesome-free
2.ライブラリを読み込む
app.jsなどライブラリをまとめて読み込んでいる所に以下を記述します。
import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing);
3.使用する
該当のコードはこんな感じ。
<div class="sidebar-sns-links">
<social-sharing
url="http://localhost:8080/"
title="vue-social-sharingのテスト"
description="vue-social-sharingのテスト"
quote="Vue is a progressive framework for building user interfaces."
twitter-user="test"
inline-template
>
<div>
<network network="twitter">
<font-awesome-icon icon="fa-twitter" /> Twitter
<font-awesome-icon class="fab fa-twitter" />
</network>
</div>
</social-sharing>
</div>
基本的に<social-sharing>
タグで囲ってあげるだけでOKです。
公式docにプロパティ一覧が載っています。
url、title ,description ,twitter-user辺りを今回は指定しています。 これで完成です。
まとめ
「vue-social-sharering」で簡単に「twitterでシェア」ボタンを作っていきました。 記事を読んでも分かる通り、installしてすぐ使えるラクラクなライブラリです。
今回はtwitterでしたが、公式ではこんな感じで紹介されているので、大抵のSNSには対応できるライブラリかなーと思います。

皆さんの参考になれば幸いです。
参考記事
https://qiita.com/harachan/items/b2d3ace4aca5df1616e5
初めてweb開発の現場に入った時にVue.jsの勉強用に買った本を思い出に添付。