Tutorials
API Key Inventory Tutorial
Build a public stock & inventory tracking system using GCP API Key.
Learn how to connect nuxt-gsheet with standard Google Sheets API v4 using a GCP API Key.
1. Google Cloud Console Setup
- Go to Google Cloud Console.
- Create project -> Enable Google Sheets API.
- Go to Credentials -> + Create Credentials -> API Key.
- Configure
.env:
.env
GSHEET_SPREADSHEET_ID=1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms
GSHEET_API_KEY=AIzaSyD-YOUR-GOOGLE-API-KEY
2. Vue Component Implementation
pages/inventory.vue
<script setup lang="ts">
interface InventoryItem {
sku: string
name: string
stock: string
location: string
}
const { data: stockItems, pending, error } = await useGSheetAsObject<InventoryItem[]>('A1:D50', {
sheet: 'inventory'
})
</script>
<template>
<div class="inventory-container">
<h1>Warehouse Inventory Tracker</h1>
<div v-if="error">
API Key Error: {{ error.message }}
</div>
<div v-else-if="pending">
Connecting to Google Sheets API v4...
</div>
<div v-else>
<div
v-for="item in stockItems"
:key="item.sku"
class="stock-card"
>
<h3>{{ item.name }} (SKU: {{ item.sku }})</h3>
<p>Current Stock: <strong>{{ item.stock }}</strong></p>
<span>Aisle Location: {{ item.location }}</span>
</div>
</div>
</div>
</template>