Nuxt module for Papa Parse

Nuxt module to use Papa parse as a composable.

Features

This module provides an easy way to use Papa parser on your Nuxt app and transform CSV documents to JSON and back

Quick Setup

1. Add nuxt-papa-parse dependency to your project

1# Using pnpm
2pnpm add nuxt-papa-parse
3
4# Using yarn
5yarn add nuxt-papa-parse
6
7# Using npm
8npm install nuxt-papa-parse

2. Add nuxt-papa-parse to the modules section of nuxt.config.ts

1export default defineNuxtConfig({
2  modules: ["nuxt-papa-parse"],
3  papaparse: {
4    globals: true, //default is false
5  },
6});

That's it! You can now use My Module in your Nuxt app ✨

Example

Global use

1<template>
2  <main>
3    <h1>Use a csv file to test papa parser</h1>
4
5    <input type="file" aria-label="Upload CSV" @change="handleFileChange" />
6
7    <div v-if="csvData">
8      <pre>{{ csvData }}</pre>
9    </div>
10  </main>
11</template>
12
13<script setup lang="ts">
14const csvData = ref<string | null>(null);
15const handleFileChange = (event: Event) => {
16  const file: File | null =
17    (event.target as HTMLInputElement).files?.[0] || null;
18  if (file) {
19    readCsv(file);
20  }
21};
22
23const readCsv = (file: File) => {
24  const reader = new FileReader();
25  reader.onload = (event: ProgressEvent<FileReader>) => {
26    if (!event.target) {
27      return;
28    }
29    const csv = event.target.result;
30
31    transformCsvToJson(csv as string);
32  };
33  reader.readAsText(file);
34};
35
36const transformCsvToJson = (csv: string) => {
37  $papa.parse(csv, {
38    headers: true,
39    complete: (result) => {
40      csvData.value = JSON.stringify(result.data, null, 2);
41      console.log(result);
42    },
43  });
44};
45</script>

Composable use

1<script setup lang="ts">
2const papa = usePapaParse();
3
4const csvData = ref<string | null>(null);
5const handleFileChange = (event: Event) => {
6  const file: File | null =
7    (event.target as HTMLInputElement).files?.[0] || null;
8  if (file) {
9    readCsv(file);
10  }
11};
12
13const readCsv = (file: File) => {
14  const reader = new FileReader();
15  reader.onload = (event: ProgressEvent<FileReader>) => {
16    if (!event.target) {
17      return;
18    }
19    const csv = event.target.result;
20
21    transformCsvToJson(csv as string);
22  };
23  reader.readAsText(file);
24};
25
26const transformCsvToJson = (csv: string) => {
27  papa.parse(csv, {
28    headers: true,
29    complete: (result) => {
30      csvData.value = JSON.stringify(result.data, null, 2);
31      console.log(result);
32    },
33  });
34};
35</script>
36
37<template>
38  <main>
39    <input type="file" aria-label="Upload CSV" @change="handleFileChange" />
40  </main>
41</template>

Learn more in the Papa Parse documentation.