Registry / data / vue-papa-parse

vue-papa-parse

library3.1.0jsnpmunverified

Vue PapaParse is a lightweight wrapper that integrates the powerful PapaParse library into Vue.js applications, enabling seamless CSV parsing and unparsing. It supports both Vue 2 (via `Vue.use`) and Vue 3 (via `app.use` and `inject`), making it a versatile choice for projects needing to handle delimited text data. The current stable version is 3.1.0, and development is active with recent minor updates. Key differentiators include its deep integration into the Vue reactivity system, providing the PapaParse instance directly on the Vue component context (e.g., `this.$papa` or through `inject('papa')`), and extending PapaParse with additional utility methods like `download` and `dedupe`. This allows for straightforward data import and export within Vue components without directly managing the underlying PapaParse library. It addresses common CSV parsing challenges, such as handling various delimiters, quoted fields, and line endings reliably.

data serialization web-framework

npm install vue-papa-parse

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PAPA-PARSE

vue-papa-parse

datajavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VuePapaParse

✓ import VuePapaParse from 'vue-papa-parse'

✗ const VuePapaParse = require('vue-papa-parse')

This is the default export used for plugin installation in both Vue 2 and Vue 3 applications.

this.$papa

✓ this.$papa.parse(csvString, config)

✗ Papa.parse(csvString, config)

After installing the plugin, the PapaParse instance is available on the Vue component instance via `this.$papa` in Vue's Options API. Direct use of a global `Papa` object is incorrect with this wrapper.

inject('papa')

✓ const papa = inject('papa'); papa.parse(csvString, config)

✗ const papa = ref(null); onMounted(() => { papa.value = getCurrentInstance().proxy.$papa; });

For Vue 3's Composition API, the PapaParse instance should be retrieved using `inject('papa')` within `setup` or `<script setup>`, providing a reactive and context-aware access method. Avoid direct `getCurrentInstance().proxy.$papa` for better reusability and explicit dependency injection.

This quickstart demonstrates how to install `vue-papa-parse` as a Vue 3 plugin and use the injected PapaParse instance within a `<script setup>` component to parse a CSV string. It shows basic data and error handling.

import { createApp, ref, onMounted, inject } from 'vue'; import VuePapaParse from 'vue-papa-parse'; const app = createApp({ template: ` <div id="app"> <h1>CSV Parsing Example</h1> <textarea v-model="csvInput" rows="10" cols="50" placeholder="Paste CSV here..."></textarea> <button @click="parseCsv">Parse CSV</button> <div v-if="parsedData.length"> <h2>Parsed Data:</h2> <pre>{{ JSON.stringify(parsedData, null, 2) }}</pre> </div> <div v-if="errors.length"> <h2>Errors:</h2> <pre>{{ JSON.stringify(errors, null, 2) }}</pre> </div> </div> `, setup() { const papa = inject('papa'); // Inject the PapaParse instance const csvInput = ref('Name,Age\nAlice,30\nBob,25'); const parsedData = ref([]); const errors = ref([]); const parseCsv = () => { if (!papa) { console.error('PapaParse instance not injected!'); return; } papa.parse(csvInput.value, { header: true, // Convert first row to object keys dynamicTyping: true, // Auto-convert numbers/booleans skipEmptyLines: true, complete: (results) => { parsedData.value = results.data; errors.value = results.errors; console.log('Parsed Data:', results.data); console.log('Errors:', results.errors); }, error: (err) => { errors.value.push(err); console.error('Parsing error:', err); } }); }; // Example: parsing on mount if you had a default CSV or file input // onMounted(parseCsv); return { csvInput, parsedData, errors, parseCsv }; } }); app.use(VuePapaParse); app.mount('#app');

Debug

Known issues

breakingVersion 3.0.0 introduced support for Vue 3, changing the plugin installation method for new Vue applications. While Vue 2 compatibility is maintained, Vue 3 users must now use `app.use(VuePapaParse)` instead of `Vue.use(VuePapaParse)`.

fix

For Vue 3 applications, ensure you initialize the plugin on your application instance: `const app = createApp(App); app.use(VuePapaParse);`

affects: >=3.0.0

breakingVersion 2.0.0 upgraded the underlying PapaParse library to version 5.3.0 to address a critical ReDOS vulnerability. While `vue-papa-parse` wrapper methods remained mostly consistent, direct users of advanced PapaParse APIs should consult the PapaParse v5 documentation for potential API changes or deprecated methods.

fix

Review the official PapaParse documentation for version 5.x to understand any changes to configuration options, callbacks, or result structures, especially for complex parsing scenarios. Update `vue-papa-parse` to the latest version for security patches.

affects: >=2.0.0 <3.0.0

gotchaWhen parsing CSV data, forgetting to set `header: true` in the configuration object will result in an array of arrays instead of an array of objects. This means you'll access data by numerical index (e.g., `row[0]`) rather than by header name (e.g., `row.Name`).

fix

Always include `header: true` in your PapaParse configuration if your CSV data contains a header row and you want to receive an array of objects for easier data access: `this.$papa.parse(csvString, { header: true, complete: (results) => { /* ... */ } })`.

affects: >=1.0.0

gotchaUsing `vue-papa-parse` in Vue 3 Composition API components requires explicit injection using `inject('papa')`. Attempting to access `$papa` directly via `getCurrentInstance().proxy.$papa` is generally discouraged for better testability and explicit dependency management.

fix

Inside your Vue 3 Composition API setup function or `<script setup>`, retrieve the instance with `const papa = inject('papa');`.

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'parse')

`vue-papa-parse` plugin was not correctly installed on the Vue application or component instance, or `$papa` is being accessed outside a Vue component context.

fix

Ensure `app.use(VuePapaParse)` (Vue 3) or `Vue.use(VuePapaParse)` (Vue 2) is called during application initialization. In Vue 3 Composition API, use `inject('papa')` to get the instance.

Papa is not defined

Attempting to use the global `Papa` object directly without importing or accessing the `vue-papa-parse` wrapper's instance.

fix

Always interact with PapaParse through the `vue-papa-parse` wrapper. Use `this.$papa` in Vue Options API components or `inject('papa')` in Vue 3 Composition API components.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parse')

The `inject('papa')` call resulted in `null` because `VuePapaParse` was not installed, or `inject('papa')` was called in a context where Vue's injection system is not active (e.g., outside `setup` or `<script setup>`).

fix

Verify `app.use(VuePapaParse)` is executed before any components try to `inject('papa')`. Ensure the injection happens within a valid Vue component `setup` context.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for Vue integration, supporting both Vue 2 and Vue 3.

Agent activity

21 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/twickstrom/vue-papa-parse ↗

packagehttps://www.npmjs.com/package/vue-papa-parse ↗