Write json file vuejs

There are 3 ways to do this.

1. Write to local storage

2. Create a Blob and invoke an event to download it

3. Wrap it into a electron app and use node fs module to save file

I can show you a sample here for these 3 cases

index.html

test.js (Write to local storage)

new Vue ({ el: '#vue-app', data: { name: '', last: '', index: 0, grade: 0, arr: [] }, methods: { add: function (e) { this.arr.push({first: this.name, lastn: this.last, index: this.index, grade: this.grade}); console.log(1); }, saveFile: function() { const data = JSON.stringify(this.arr) window.localStorage.setItem('arr', data); console.log(JSON.parse(window.localStorage.getItem('arr'))) } });

Create a Blob and invoke a event to download it

only change for saveFile func

saveFile: function() { const data = JSON.stringify(this.arr) const blob = new Blob([data], {type: 'text/plain'}) const e = document.createEvent('MouseEvents'), a = document.createElement('a'); a.download = "test.json"; a.href = window.URL.createObjectURL(blob); a.dataset.downloadurl = ['text/json', a.download, a.href].join(':'); e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); }

Wrap it into an Electron app and use node fs module to save file

Change for saveFile func

saveFile: function() { const data = JSON.stringify(this.arr) const fs = require('fs'); try { fs.writeFileSync('myfile.txt', data, 'utf-8'); } catch(e) { alert('Failed to save the file !'); } }

Then use Electron to wrap it

electron ./index.html