Files
CSV
How to define, write and query CSV data.
Nuxt Content supports CSV files out of the box. You can store and query data in CSV format, with options for JSON conversion and custom delimiters.
Configuration
You can configure how CSV files are parsed in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
content: {
build: {
csv: {
// Convert CSV data to JSON objects
json: true,
// Specify custom delimiter (default is ',')
delimiter: ','
}
}
}
})
Example Usage
Create a CSV file in your content directory:
content/users.csv
id,name,email
1,John Doe,[email protected]
2,Jane Smith,[email protected]
Query the data in your components:
<script setup>
const { data } = await useAsyncData('users', () =>
queryCollection('users').find()
)
</script>
<template>
<ul>
<li v-for="user in data" :key="user.id">
{{ user.name }} ({{ user.email }})
</li>
</ul>
</template>
With json: true in the configuration, each row will be converted to a JavaScript object with the header row used as keys:
[
{
"id": "1",
"name": "John Doe",
"email": "[email protected]"
},
{
"id": "2",
"name": "Jane Smith",
"email": "[email protected]"
}
]
Custom Delimiters
If your CSV files use a different delimiter, you can specify it in the configuration:
nuxt.config.ts
export default defineNuxtConfig({
content: {
build: {
csv: {
delimiter: ';' // Use semicolon as delimiter
}
}
}
})
This would parse CSV files like:
id;name;email
1;John Doe;[email protected]
The CSV parser can be disabled by setting
csv: false in the configuration if you don't need CSV support.