https://github.com/mikemenaker/v-download
Vue.js directive to download (and optionally transform) data
https://github.com/mikemenaker/v-download
csv directive json vue-directive vuejs
Last synced: about 2 months ago
JSON representation
Vue.js directive to download (and optionally transform) data
- Host: GitHub
- URL: https://github.com/mikemenaker/v-download
- Owner: mikemenaker
- License: mit
- Created: 2018-02-12T20:48:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:19:16.000Z (over 3 years ago)
- Last Synced: 2025-08-21T04:06:11.145Z (8 months ago)
- Topics: csv, directive, json, vue-directive, vuejs
- Language: JavaScript
- Size: 1.23 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-download
Vue.js directive to download (and optionally transform) data
#### Install
For browser usage, import the component by adding a src tag in the header ():
``
For Node usage, install the v-download package using npm
`npm install --save v-download`
## Usage
First register the directive globally:
```js
import DownloadData from 'v-download'
Vue.use(DownloadData)
```
Or locally:
```js
import { downloadData } from 'v-download'
export default {
directives: {
downloadData
}
}
```
Then use it in template:
```vue
<template>
<button v-download-data="`some text`">Download!</button>
</template>
```
## Data type
If type is provided it will be used as the mimetype:
```vue
<template>
<button v-download-data="`{'example':'some text'}`" v-download-data:type="'json'">Download!</button>
</template>
```
If an object or array (instead of a string) is provided and the type is 'csv', 'tsv' or 'json', the object/array will be converted (json will be convert using JSON.stringify, csv/tsv is assuming an array and will be iterated)
```vue
<template>
<button v-download-data="myObject" v-download-data:type="'json'">Download!</button>
</template>
```
## File name
If filename is provided it will be used as the downloaded file name:
```vue
<template>
<button v-download-data="`{'example':'some text'}`" v-download-data:filename="'mydownload.json'">Download!</button>
</template>
```