vue-blob-json-csv
Advanced tools
[](https://npmjs.com/package/vue-blob-json-csv) [](https://www.npmjs.com/package/vu
Component library to download a JSON or CSV file using Vue.
$ yarn add vue-blob-json-csv
# or
$ npm i --save vue-blob-json-csv
import Vue from "vue";
import VueBlobJsonCsv from 'vue-blob-json-csv';
Vue.use(VueBlobJsonCsv)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./dist/VueBlobJsonCsv.umd.min.js"></script>
<script>
Vue.use(VueBlobJsonCsv.default);
new Vue({
el: "#app"
})
</script>
<template>
<vue-blob-json-csv
@success="handleSuccess"
@error="handleError"
tag-name="div"
file-type="json"
file-name="sample"
title="Download JSON"
:data="data"
confirm="Do you want to download it?"
>
</template>
<template>
<vue-blob-json-csv
@success="handleSuccess"
@error="handleError"
file-type="json"
file-name="sample"
:data="data"
>
<h2>Title</h2>
<p>csv download</p>
</vue-blob-json-csv>
</template>
<body>
<div id="app">
<vue-blob-json-csv
file-type="json"
file-name="todos"
data="[
{
userId: 1,
id: 1,
title: 'delectus aut autem',
completed: false
},
{
userId: 1,
id: 2,
title: 'quis ut nam facilis et officia qui',
completed: false
},
{
userId: 1,
id: 3,
title: 'fugiat veniam minus',
completed: false
}
]"
>
Download JSON
</vue-blob-json-csv>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-blob-json-csv@latest/dist/VueBlobJsonCsv.umd.min.js"></script>
<script>
Vue.use(VueBlobJsonCsv.default);
new Vue({
el: "#app"
})
</script>
</body>
| Prop | Data Type | Required | Default | Description |
|---|---|---|---|---|
tagName | String | false | span | Element Tag Name |
title | String | false | Button title name | |
fileType | String | true | csv | File extension (csv or json) |
fileName | String | false | data | File name |
data | Array | true | Data you want to export | |
fields | Array | false | Export only specific keys | |
confirm | String | false | Text to display in the dialog |
| Event | Description |
|---|---|
success | Event after download is complete |
error | Error |
Welcome to improve vue-blob-json-csv with any issue, pull request or code review.
# Setup
$ cd vue-blob-json-csv
$ yarn
# dev-server
$ yarn serve
# Build
$ yarn build:lib
# Unit Testing
$ yarn test:unit
# Lint
$ yarn lint
# Lint - fix
$ yarn lint --fix
MIT
FAQs
[](https://npmjs.com/package/vue-blob-json-csv) [](https://www.npmjs.com/package/vu
The npm package vue-blob-json-csv receives a total of 184 weekly downloads. As such, vue-blob-json-csv popularity was classified as not popular.
We found that vue-blob-json-csv demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.