Tutorial Praktis
Tutorial Katalog Produk CSV
Bangun katalog produk e-commerce menggunakan stream ekspor CSV langsung.
Pelajari cara me-stream data CSV mentah dari Google Sheets publik untuk merender katalog produk berkinerja tinggi.
1. Setup
- Buat Google Sheet publik bernama Katalog Toko.
- Bagikan sheet sebagai Anyone with the link can view.
- Tambahkan Spreadsheet ID ke
.env:
.env
GSHEET_SPREADSHEET_ID=spreadsheet-id-publik-kamu
2. Implementasi Komponen Vue
pages/catalog.vue
<script setup lang="ts">
// Ambil grid CSV mentah
const { data: rawRows, pending } = await useGSheet('A1:E100', {
sheet: 'products'
})
</script>
<template>
<div class="catalog">
<h1>Katalog Toko Publik</h1>
<div v-if="pending">
Me-stream data CSV...
</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>