Composables
useGSheetAsObject
Map first-row header labels to JavaScript objects automatically.
The useGSheetAsObject composable maps spreadsheet rows into an array of typed key-value objects using the column headers in the first row.
Signature
function useGSheetAsObject<T = any[]>(
range: string,
options?: ComposablesOptions
): {
data: Ref<T | null>
pending: Ref<boolean>
error: Ref<FetchError | null>
refresh: () => Promise<void>
execute: () => Promise<void>
status: Ref<'idle' | 'pending' | 'success' | 'error'>
}
How It Works
If your spreadsheet range A1:C3 contains:
| A | B | C |
|---|---|---|
| id | name | price |
| 101 | Wireless Mouse | 29.99 |
| 102 | Mechanical Keyboard | 89.99 |
useGSheetAsObject('A1:C3') outputs:
[
{ "id": 101, "name": "Wireless Mouse", "price": 29.99 },
{ "id": 102, "name": "Mechanical Keyboard", "price": 89.99 }
]
Basic Example
pages/products.vue
<script setup lang="ts">
interface Product {
id: string
name: string
price: string
}
const { data: products, pending } = await useGSheetAsObject<Product[]>('A1:C50', {
sheet: 'products'
})
</script>
<template>
<div v-if="pending">Loading products...</div>
<ul v-else>
<li v-for="product in products" :key="product.id">
{{ product.name }} - ${{ product.price }}
</li>
</ul>
</template>