{"id":14292,"library":"vue-papa-parse","title":"Vue PapaParse Wrapper","description":"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.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/twickstrom/vue-papa-parse","tags":["javascript","vue","vuejs","vue.js","vue2","vue3","vue-papa-parse","PapaParse","parse","typescript"],"install":[{"cmd":"npm install vue-papa-parse","lang":"bash","label":"npm"},{"cmd":"yarn add vue-papa-parse","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-papa-parse","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue integration, supporting both Vue 2 and Vue 3.","package":"vue","optional":false}],"imports":[{"note":"This is the default export used for plugin installation in both Vue 2 and Vue 3 applications.","wrong":"const VuePapaParse = require('vue-papa-parse')","symbol":"VuePapaParse","correct":"import VuePapaParse from 'vue-papa-parse'"},{"note":"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.","wrong":"Papa.parse(csvString, config)","symbol":"this.$papa","correct":"this.$papa.parse(csvString, config)"},{"note":"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.","wrong":"const papa = ref(null); onMounted(() => { papa.value = getCurrentInstance().proxy.$papa; });","symbol":"inject('papa')","correct":"const papa = inject('papa'); papa.parse(csvString, config)"}],"quickstart":{"code":"import { createApp, ref, onMounted, inject } from 'vue';\nimport VuePapaParse from 'vue-papa-parse';\n\nconst app = createApp({\n  template: `\n    <div id=\"app\">\n      <h1>CSV Parsing Example</h1>\n      <textarea v-model=\"csvInput\" rows=\"10\" cols=\"50\" placeholder=\"Paste CSV here...\"></textarea>\n      <button @click=\"parseCsv\">Parse CSV</button>\n      <div v-if=\"parsedData.length\">\n        <h2>Parsed Data:</h2>\n        <pre>{{ JSON.stringify(parsedData, null, 2) }}</pre>\n      </div>\n      <div v-if=\"errors.length\">\n        <h2>Errors:</h2>\n        <pre>{{ JSON.stringify(errors, null, 2) }}</pre>\n      </div>\n    </div>\n  `,\n  setup() {\n    const papa = inject('papa'); // Inject the PapaParse instance\n    const csvInput = ref('Name,Age\\nAlice,30\\nBob,25');\n    const parsedData = ref([]);\n    const errors = ref([]);\n\n    const parseCsv = () => {\n      if (!papa) {\n        console.error('PapaParse instance not injected!');\n        return;\n      }\n      papa.parse(csvInput.value, {\n        header: true, // Convert first row to object keys\n        dynamicTyping: true, // Auto-convert numbers/booleans\n        skipEmptyLines: true,\n        complete: (results) => {\n          parsedData.value = results.data;\n          errors.value = results.errors;\n          console.log('Parsed Data:', results.data);\n          console.log('Errors:', results.errors);\n        },\n        error: (err) => {\n          errors.value.push(err);\n          console.error('Parsing error:', err);\n        }\n      });\n    };\n\n    // Example: parsing on mount if you had a default CSV or file input\n    // onMounted(parseCsv);\n\n    return {\n      csvInput,\n      parsedData,\n      errors,\n      parseCsv\n    };\n  }\n});\n\napp.use(VuePapaParse);\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"fix":"For Vue 3 applications, ensure you initialize the plugin on your application instance: `const app = createApp(App); app.use(VuePapaParse);`","message":"Version 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)`.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"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) => { /* ... */ } })`.","message":"When 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`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Inside your Vue 3 Composition API setup function or `<script setup>`, retrieve the instance with `const papa = inject('papa');`.","message":"Using `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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'2':29 '3':34 '3.1.0':57 'activ':61 'addit':98 'address':124 'allow':106 'app.use':36 'applic':18 'challeng':128 'choic':43 'common':125 'compon':85,115 'context':86 'csv':21,126 'current':53 'data':51,109 'dedup':104 'deep':70 'delimit':49,133 'develop':59 'differenti':67 'direct':81,117 'download':102 'e.g':87 'enabl':19 'end':138 'export':112 'extend':95 'field':135 'handl':48,131 'import':110 'includ':68 'inject':38,92 'instanc':80 'integr':11,71 'javascript':140 'key':66 'librari':15,122 'lightweight':8 'like':101 'line':137 'make':39 'manag':118 'method':100 'minor':64 'need':46 'papa':89,93,148 'papapars':2,5,14,79,96,121,150 'pars':22,127,149,151 'power':13 'project':45 'provid':77 'quot':134 'reactiv':75 'recent':63 'reliabl':139 'seamless':20 'stabl':54 'straightforward':108 'support':26 'system':76 'text':50 'typescript':152 'under':120 'unpars':24 'updat':65 'util':99 'various':132 'versatil':42 'version':55 'via':30,35 'vue':1,4,28,33,74,84,114,141,147 'vue-papa-pars':146 'vue.js':17,143 'vue.use':31 'vue2':144 'vue3':145 'vuej':142 'within':113 'without':116 'wrapper':3,9","created_at":"2026-04-20T01:58:57.145132+00:00","updated_at":"2026-04-20T01:58:57.145132+00:00","problems":[{"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.","cause":"`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.","error":"TypeError: Cannot read properties of undefined (reading 'parse')"},{"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.","cause":"Attempting to use the global `Papa` object directly without importing or accessing the `vue-papa-parse` wrapper's instance.","error":"Papa is not defined"},{"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.","cause":"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>`).","error":"Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parse')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/twickstrom/vue-papa-parse","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-papa-parse","openapi_spec":null,"status_page":null,"smithery":null,"categories":["data","serialization","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}