Composables
useGSheet
Fetch raw 2D cell grids from Google Sheets ranges.
The useGSheet composable fetches raw 2D arrays (any[][]) from a specified cell range.
It wraps Nuxt's useFetch with server-side proxy security, automatic caching, and stampede lock protection.
Signature
function useGSheet<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'>
}
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
range | string | Yes | Cell range in A1 notation (e.g. 'A1:D10'). |
options | ComposablesOptions | No | Additional options (sheet, query, cache, transform). |
Options
sheet: Sheet tab name (e.g.'Sheet1') or alias configured innuxt.config.ts.valueRenderOption:'FORMATTED_VALUE' | 'UNFORMATTED_VALUE' | 'FORMULA'.query: GViz SQL query string (e.g.'SELECT A, B WHERE C > 10').cache: Set tofalseto bypass cache.cacheMaxAge: Cache TTL override in seconds.transform: Custom transformation function.
Basic Example
pages/matrix.vue
<script setup lang="ts">
// Returns a 2D matrix of cell values
const { data: rows, pending, error, refresh } = await useGSheet('A1:D10', {
sheet: 'Sheet1'
})
</script>
<template>
<div v-if="pending">Loading spreadsheet data...</div>
<div v-else-if="error">Error: {{ error.message }}</div>
<div v-else>
<button @click="refresh()">Refresh</button>
<table>
<tr v-for="(row, rIdx) in rows" :key="rIdx">
<td v-for="(cell, cIdx) in row" :key="cIdx">
{{ cell }}
</td>
</tr>
</table>
</div>
</template>