クリップボードコピーについて、いろいろやってみてるけど、
nuxt-clipboard2を使うとすごく簡単だった。ので、そのときの備忘録。

nuxt-clipboard2は、vue-clipboard2のNuxtモジュールで、
vue-clipboard2は、clipboard.jsのVueライブラリ

インストール

$ npm i nuxt-clipboard2

nuxt.config.jsの設定

modulesにnuxt-clipboard2を設定する

import { Configuration } from "@nuxt/types";
const config: Configuration = {
  // 略
  modules: [
    "nuxt-clipboard2"
  ],
  // 略
};

export default config;

使い方: クリップボードにコピー

private async clickCopy() {
  try {
    // vue-clipboard2の$copyTextを使ってコピー
    await this.$copyText("コピーしたい文字");
  } catch (error) {
    console.error(error);
  }
}

nuxt-clipboard2は、コンポーネントでvue-clipboard2の$copyTextを使えるようにしてくれる感じ。

なので詳しくは、vue-clipboard2の方を見る。

型定義に$copyTextを追加する

nuxt-clipboard2もvue-clipboard2も型定義が無いので、
自分で追加しないといけない。。とりあえず、anyで。。

import Vue, { ComponentOptions } from "vue";
declare module "vuex/types/index" {
  interface Store<S> {
    $copyText: any;
  }
}

declare module "@nuxt/vue-app" {
  interface Context {
    $copyText: any;
  }
  interface NuxtAppOptions {
    $copyText: any;
  }
}

// Nuxt 2.9+
declare module "@nuxt/types" {
  interface Context {
    $copyText: any;
  }
  interface NuxtAppOptions {
    $copyText: any;
  }
}

declare module "vue/types/vue" {
  interface Vue {
    $copyText: any;
  }
}