Vue3 CompositionAPIでクリップボードにコピーする方法

2021年6月15日Vue.js

Vue3 CompositionAPIでクリップボードにコピーする方法を紹介します。

Vue3 CompositionAPIでクリップボードにコピーする方法

こちらの記事がとても参考になります。

Clipboard.jsをインストール

$ yarn add clipboard
$ yarn add --dev @types/clipboard

上のとちらかでインストールします。

composables/useClipboardファイルを作成

srcフォルダにcomposablesフォルダを作成し、その中にuseClipboard.(ts/js)ファイルを作成します。

TypeScriptの場合

VueのCompositionAPIにTypeScriptを使っている場合は、上の記事をそのまま沿っていけば実装できます。

JavaScriptの場合

TypeScriptの部分を削除していけばOKです。

import Clipboard from 'clipboard'

export default (opts) => {
  // default appendToBody true
  const appendToBody = opts?.appendToBody === undefined ? true : opts.appendToBody
  return {
    toClipboard(text, container) {
      return new Promise((resolve, reject) => {
        // fakeエレメントの作成
        const fakeEl = document.createElement('button')
        // Clipboard.jsの新規作成
        const clipboard = new Clipboard(fakeEl, {
          text: () => text,
          action: () => 'copy',
          container: container !== undefined ? container : document.body
        })
        clipboard.on('success', (e) => {
          clipboard.destroy()
          resolve(e)
        })
        clipboard.on('error', (e) => {
          clipboard.destroy()
          reject(e)
        })

        // 要素のマウスクリックイベントを発生
        fakeEl.click()
        // bodyから取り除く
        if (appendToBody) document.body.removeChild(fakeEl)
      })
    }
  }
}

Vueコンポーネントで使用

template

<button @click="copy"><i class='bx bxs-copy'></i></button>

上ではboxiconsを使っていますが、iタグ部分は何でも大丈夫です。

script

import useClipboard from '@/composables/useClipboard'
export default {
  setup() {
    const { toClipboard } = useClipboard()
    const text = 'ここにコピーしたいテキスト'

    const copy = async () => {
      try {
        await toClipboard(text)
        console.log('Copied to clipboard')
      } catch (e) {
        console.error(e)
      }
    }
    return { copy, text }
  }
}

refを使って動的にすることも可能です。

vue-clipboard3を使う方法

上の記事の人が作成したオープンソースのvue-clipboard3があります。

これを使うとより簡単に実装できます。