Vue3 ライブラリ「vue-share-buttons」を使用してシェアボタンを実装する

作成日 2021.07.15
更新日 2022.02.25
Vue.js
Vue3

ライブラリ「vue3-treeselect」を使用して、ツリー状で選択可能なセレクトボックスを実装することが可能です。ここでは、「vue3-treeselect」を利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. vue-share-buttonsインストール
4. vue-share-buttons使い方
5. 起動

環境

OS Rocky Linux release 8.4 (Green Obsidian)
node v14.17.3
npm 7.19.1
yarn 1.22.10
@vue/cli 4.5.13

Vue3環境をwindowsに構築する

Vue3環境構築

vue-cliを使用して構築してます。

## @vue/cliインストール
npm install -g @vue/cli

## 初期化
npm init

## upgrade
vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

## vue 3を選択
Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

## 移動
cd vueapp

vue-share-buttonsインストール

yarnを使用して、インストールします。

yarn add vue-share-buttons

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

vue-share-buttons使い方

src配下のApp.vueを下記のように編集します。

<template>

  <div>
    <twitter-button
      shareUrl="https://mebee.info/"
      shareDescription="説明"
    />
    <twitter-button v-bind:isBlank="false" btnText />
    <twitter-button class="share-button--circle share-button--outline" btnText />
    <twitter-button class="share-button--painted" url="https://mebee.info/" hasCounter />
  </div>

  <div>
    <facebook-button class="share-button--outline" hasCounter />
    <facebook-button v-bind:isBlank="false" btnText />
    <facebook-button class="share-button--circle share-button--outline" btnText />
    <facebook-button class="share-button--painted" url="https://mebee.info/" hasCounter />
  </div>

</template>

<script>
import TwitterButton from "vue-share-buttons/src/components/TwitterButton";
import FacebookButton from "vue-share-buttons/src/components/FacebookButton";

export default {
  components: { TwitterButton,FacebookButton },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 260px;
}
</style>