NuxtでボタンをクリックしたときにToastが出てURLをコピーする機能の実装

概要

調べてみたら思ったより簡単に実装できたるモジュールがあったので共有します。
ソースはここ。

こんな感じのを作るよ！！

導入

nuxt-clipboard2

まずはインストール。

$ npm install --save nuxt-clipboard2

そしてmoduleに追加。

nuxt.config.js

modules: [
    'nuxt-clipboard2',//追加
  ],

これで

<v-btn class="ma-2" text icon color="green lighten-2" @click="onCopy(`http://localhost:3000/hoge/${hoge.id}/`)">
        <v-icon>mdi-share-variant</v-icon>
</v-btn>

..............

<script>
export default {
  methods: {
    onCopy(url) {
      this.$copyText(url)
    }
  }
}

これをfor文で動的にidを取得すれば自動的にurlが割り当てられます。
基本的なものとしてはこれで十分です。

しかし、ちゃんとコピーされたかどうかをtoastで表示した方がユーザーにとってみやすくなるので、もう少しだけいじってみましょう。

@nuxtjs/toastを使います。

$ npm install @nuxtjs/toast

nuxt.config.js

modules: [
    'nuxt-clipboard2',//追加
    '@nuxtjs/toast' //追加
]

// Toastの設定
toast: {
    position: 'top-center',
    theme: 'bubble'
  },

<script>
export default {
  props: ['item', 'onDelete'],
  methods: {
    onCopy(url) {
        this.$copyText(url)
        this.$toast.success('URLがコピーされました!!')
      }
    }
  }
</script>

これで冒頭のような処理が行われます。

toast機能は色々と応用が効くと思ったので書いておきました。
誰かの役に立つと幸いです。

お疲れ様でした。