Tutorials
CSV Product Catalog Tutorial
Build an e-commerce product catalog using direct CSV export streams.
Learn how to stream raw CSV data from public Google Sheets to render high-performance product catalogs.
1. Setup
- Create a public Google Sheet named Store Catalog.
- Share sheet as Anyone with the link can view.
- Add Spreadsheet ID to
.env:
.env
GSHEET_SPREADSHEET_ID=your-public-spreadsheet-id
2. Vue Component Implementation
pages/catalog.vue
<script setup lang="ts">
// Fetch raw CSV grid
const { data: rawRows, pending } = await useGSheet('A1:E100', {
sheet: 'products'
})
</script>
<template>
<div class="catalog">
<h1>Public Store Catalog</h1>
<div v-if="pending">
Streaming CSV data...
</div>
<table v-else>
<tr
v-for="(row, rIdx) in rawRows"
:key="rIdx"
>
<td
v-for="(cell, cIdx) in row"
:key="cIdx"
>
{{ cell }}
</td>
</tr>
</table>
</div>
</template>