# vue-papa-parse

> A simple wrapper for for the original PapaParse built for VueJs. Supports both Vue 2 & Vue 3.

Latest version **3.1.0** (published 2022-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-papa-parse
pnpm add vue-papa-parse
yarn add vue-papa-parse
bun add vue-papa-parse
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2022-06-17 |
| First published | 2019-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Tim Wickstrom |
| Maintainers | timwickstrom |
| Keywords | vue, vuejs, vue.js, vue2, vue3, vue-papa-parse, PapaParse, parse, csv, json, csv-to-json, json-to-csv |

## Links

- npm: https://www.npmjs.com/package/vue-papa-parse
- Repository: https://github.com/twickstrom/vue-papa-parse
- Issues: https://github.com/twickstrom/vue-papa-parse/issues
- npm.io page: https://npm.io/package/vue-papa-parse

## Dependencies (1)

- [papaparse](https://npm.io/package/papaparse.md) ^5.3.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 3.1.0 (latest) — 2022-06-17
- 3.0.5 — 2022-04-22
- 3.0.4 — 2021-11-15
- 3.0.3 — 2021-11-12
- 3.0.1 — 2021-11-11
- 3.0.0 — 2021-11-09
- 2.0.2 — 2021-11-09
- 3.0.0-beta.4 — 2021-11-09
- 3.0.0-beta.3 — 2021-11-09
- 2.0.1 — 2021-11-09
- 3.0.0-beta.1 — 2021-11-09
- 3.0.0-beta.0 — 2021-11-09
- 3.1.0-beta.0 — 2021-11-09
- 2.0.0 — 2020-09-13
- 1.3.0 — 2019-11-11
- … 8 more at https://npm.io/package/vue-papa-parse/versions

## README

# VuePapaParse

A simple wrapper for for the original PapaParse built for VueJs. Supports both Vue 2 & Vue 3.

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/donate/?hosted_button_id=TU39WLXAJQTR4)
[![NPM](https://img.shields.io/npm/v/vue-papa-parse)](https://www.npmjs.com/package/vue-papa-parse)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)
[![NPM Downloads](https://img.shields.io/npm/dm/vue-papa-parse)](https://www.npmjs.com/package/vue-papa-parse)
[![Reputation](https://img.shields.io/stackexchange/stackoverflow/r/787796)](https://stackoverflow.com/users/787796/tim-wickstrom)

***

## Table of contents
* [VuePapaParse](#vuepapaparse)
* [Installation](#installation)
* [Default import (Vue 2)](#default-import-vue-2)
* [Default import (Vue 3)](#default-import-vue-3)
* [Usage](#usage)
  * [Parse String](#parse-string)
  * [Parse Local Files](#parse-local-files)
  * [Parse Remote File](#parse-remote-file)
  * [Unparse](#unparse)
  * [Download](#download)
  * [Dedupe](#dedupe)
* [PapaParse Docs](#papaparse-docs)
* [Example Vue Component](#example-vue-component)

## Installation

```bash
npm i vue-papa-parse

# or

yarn add vue-papa-parse
```

## Default import (Vue 2)
```javascript
import Vue from 'vue'
import VuePapaParse from 'vue-papa-parse'
Vue.use(VuePapaParse)
```

## Default import (Vue 3)
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import VuePapaParse from 'vue-papa-parse'

const app = createApp(App)

app.use(VuePapaParse)
app.mount('#app')
```

## Usage

### PARSE STRING
```javascript
this.$papa.parse(csvString[, config])
```
read the docs for [parsing csv strings](https://www.papaparse.com/docs#strings)

### PARSE LOCAL FILES
```javascript
this.$papa.parse(file, config)
```
read the docs for [parsing local files](https://www.papaparse.com/docs#local-files)

### PARSE REMOTE FILE
```javascript
this.$papa.parse(url, {
	download: true,
	// rest of config ...
})
```
read the docs for [parsing remote files](https://www.papaparse.com/docs#remote-files)
>**PARSE Converts CSV to JSON**

>**The Parse Result Object**
>A parse result always contains three objects: data, errors, and meta. Data and errors are arrays, and meta is an object. In the step callback, the data array will only contain one element. [See the parse results object docs.](https://www.papaparse.com/docs#results)

>**The Parse Config Object**
>The  `parse`  function may be passed a configuration object. It defines settings, behavior, and callbacks used during parsing. Any properties left unspecified will resort to their default values. [See all config options for parse.](https://www.papaparse.com/docs#config)

### UNPARSE
```javascript
this.$papa.unparse(data[, config])
```
read the docs for [unparsing data](https://www.papaparse.com/docs#unparse)

>**UNPARSE Converts JSON to CSV**

> Papa's  `unparse`  utility writes out correct delimited text strings given an array of arrays or an array of objects. [See all config options for unparse.](https://www.papaparse.com/docs#unparse-config-default)

### DOWNLOAD
*Extended Papa to include a simple download method. This allows you to easily download a ```.csv``` file for JSON that has been converted to CSV.*

> This method takes two arguments:
>
> - ```csv``` usually the the results from ```this.$papa.unparse(data[, config])```)
> - ```title``` The title of the downloaded .csv.
	 note: no need to add the .csv extension.

```javascript
this.$papa.download(csv, title)
```

### DEDUPE
*Extended Papa to include a simple deduplication method. This allows you to simply remove exact duplicate entries from a parsed CSV file.*

> This method takes one argument:
>
> - ```data``` usually the data key from the result object returned from ```this.$papa.parse(mixed[, config])```)

### PAPAPARSE DOCS
*View all available PapaParse options by visiting [the Official Papa docs](https://www.papaparse.com/docs)*

### EXAMPLE VUE COMPONENT
```javascript
<template>
  <button
    @click="unparse"
  >
    Unparse Sample Data
  </button>
</template>

<script>
export default {
  data () {
    return {
      unparsedResults: null,
      sampleData: [{
        "Column 1": "1-1",
        "Column 2": "1-2",
        "Column 3": "1-3",
        "Column 4": "1-4"
      }, {
        "Column 1": "2-1",
        "Column 2": "2-2",
        "Column 3": "2-3",
        "Column 4": "2-4"
      }, {
        "Column 1": "3-1",
        "Column 2": "3-2",
        "Column 3": "3-3",
        "Column 4": "3-4"
      }, {
        "Column 1": 4,
        "Column 2": 5,
        "Column 3": 6,
        "Column 4": 7
      }]
    }
  },
  watch: {
    unparsedResults (current) {
      if (current) {
        console.log(current)
      }
    }
  },
  methods: {
    unparse () {
      this.unparsedResults = this.$papa.unparse(this.sampleData, {
        delimiter: ","
      })
    }
  }
}
</script>

/*
  Expected output in the console is:
  1-1,1-2,1-3,1-4
  2-1,2-2,2-3,2-4
  3-1,3-2,3-3,3-4
  4,5,6,7
*/
```

---
_Source: https://npm.io/package/vue-papa-parse · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._