How to export data to CSV in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Exporting data to CSV format is essential for Vue applications that handle tables, reports, and data analytics features. As the creator of CoreUI, I’ve built CSV export functionality into countless dashboards and admin panels. The most effective solution is to convert your data array to CSV format and trigger a download using blob URLs. This approach works entirely client-side without requiring backend processing.
Convert data to CSV format and trigger download in Vue 3.
<template>
<button @click='exportToCSV'>Export to CSV</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const data = ref([
{ id: 1, name: 'John Doe', email: '[email protected]' },
{ id: 2, name: 'Jane Smith', email: '[email protected]' },
{ id: 3, name: 'Bob Johnson', email: '[email protected]' }
])
const exportToCSV = () => {
const headers = Object.keys(data.value[0]).join(',')
const rows = data.value.map(row =>
Object.values(row).join(',')
).join('\n')
const csv = `${headers}\n${rows}`
const blob = new Blob([csv], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'export.csv'
link.click()
window.URL.revokeObjectURL(url)
}
return { exportToCSV }
}
}
</script>
The CSV export function extracts headers from the first object’s keys, then maps each data row to comma-separated values. A blob is created with CSV content and the appropriate MIME type. A temporary anchor element triggers the download with the specified filename. The blob URL is revoked after download to prevent memory leaks.
Best Practice Note
This is the same CSV export approach we use in CoreUI Vue tables and data grids. For production use, handle edge cases like commas or quotes in data by wrapping values in quotes and escaping internal quotes. Consider using a library like PapaParse for complex CSV generation with proper escaping and encoding.
