Nuxtでクリップボードに値をコピーする

vue-clipboard2を利用する github.com

プロジェクトに追加

npm install --save vue-clipboard2

plugins/vueClipboard.tsを作成

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

nuxt.config.tsに作成したpluginを追加

export default {
//省略
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/vueClipboard' // 追加
  ],
// 省略
}

これで準備は完了

利用したいコンポーネントで以下の様に記述

<template lang="pug">
  div
    button(v-clipboard:copy="message") コピー
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({ components: {} })
class CopySample extends Vue {
  message = 'コピーされる内容'
}
export default CopySample
</script>