Nuxt.js + Vue.jsでvue-json-to-csvを使ってCSVダウンロードする方法をメモしておきます。
公式：https://www.npmjs.com/package/vue-json-to-csv
vue-json-to-csvのインストールと初期設定
まず、vue-json-to-csvをインストールします。
vue-json-to-csvを使用するためにplugins配下にvue-json-to-csv.jsファイルを生成して、componentで使えるようにしておきます。
・plugins/vue-json-to-csv.js
nuxt.config.jsのpluginsに作成したファイルのパスを追記します。
・nuxt.config.js
vue-json-to-csvでCSVダウンロードを実装
実際にCSVダウンロードしてみます。コンポーネントとして使えるようにしたVueJsonToCsvを使ってbuttonタグを囲います
VueJsonToCsvのjson-dataはCSVのデータとして出力され、labelsはCSVの列名として出力され、csv-titleはCSVファイル名になります。
他にもオプションがあり、詳しくは公式サイトを参照してください。
公式：https://www.npmjs.com/package/vue-json-to-csv
・pages/books.vue
今回は例として、CSVダウンロードをクリックするとdownloadメソッドによって、computedで取得していたbookDatasからbooksにCSVで必要なデータを渡しています。
labelsは列名としてnameを本のタイトル、authorを著者として表示されるようにしています。
CSVファイル名は、moment.jsを使って「本のCSVデータ_現在日時」となるようにしています。
・pages/books.vue
