[PT-BR] - Criando Relatorios CSV com VueJs/NuxtJs

Para quem me acompanha na Twitch sabe que eu estou fazendo um projeto financeiro. (Já fica a propaganda, lives de segunda a quinta das 17h as 20h).

Uma dos recursos que mais tive vontade de implementar, seria guardar relatórios em formato csv.

Solução Encontrada

Estava procurando solucões e encontrei essa vue-json-to-csv

Gostei por que é simples e fica facil.

instalacao

Como qualquer projeto basta usar o npm

npm install vue-json-csv

ou o yarn ...

yarn add vue-json-csv

Utilizando no VueJs

<download-csv
    :data= "json_data">
    Download Data
    <img src="download_icon.png">
</download-csv>

// Essas 3 próximas linhas sao necessárias apenas dentro do vuejs.
// No nuxt isso ja é incluido/renderizado no plugin. 
// (Basicamente, é so sair usando)
import Vue from 'vue'
import JsonCSV from 'vue-json-csv'

Vue.component('downloadCsv', JsonCSV)

const app = new Vue({
    el: '#app',
    data: {     
        json_data: [
            {
                'name': 'joe',
                'surname': 'Roe',
            },
            {
                'name': 'john',
                'surname': 'Doe',
            }
        ]
    }
})

Usando no Nuxt.js

Para usar dentro do Nuxt.js temos que colocar alguns passos a mais.

Criar um plugin

// ../plugins/jsonToCsv.js

import Vue from 'vue'
import JsonCSV from 'vue-json-csv'

Vue.component('downloadCsv', JsonCSV)

Atualizar o nuxt.config.js

// nuxt.config.js
// incluir dentro de plugins

  plugins: ['~plugins/jsonToCsv.js'],

Resultado

Se baseando na documentacao oficial o resultado do .csv seria

Nome do Arquivo: My_CSV.csv

name,surname
joe,Roe
john,Doe

link do pacote para mais detalhes

Esse post, tambem foi postado na comunidade da Hub