ID
Tutorials

Sheet Routing Map Tutorial

Build a multi-sheet enterprise hub using sheets routing map aliases in nuxt.config.ts.

Learn how to configure human-readable aliases for multiple Google Spreadsheets and Apps Script Web Apps in nuxt.config.ts.

1. Module Setup with sheets Map

Configure your sheet routing map in nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-gsheet'],

  gsheet: {
    // Sheet routing map mapping clean alias names to Spreadsheet IDs / Apps Script URLs
    sheets: {
      products: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
      orders: '19rQ1234567890abcdefghijklmnopqrstuvwxyz',
      submissions: 'https://script.google.com/macros/s/AKfycb.../exec'
    }
  }
})

2. Multi-Sheet Enterprise Hub Page

pages/dashboard.vue
<script setup lang="ts">
interface Product {
  id: string
  title: string
}

interface Submission {
  id: string
  name: string
  comment: string
}

// 1. Automatically resolves alias 'products' -> Spreadsheet ID 1BxiMV...
const { data: productList } = await useGSheetAsObject<Product[]>('A1:B20', {
  sheet: 'products'
})

// 2. Automatically resolves alias 'submissions' -> Apps Script Web App URL
const { data: userSubmissions, refresh } = await useGSheetAsObject<Submission[]>('A1:C50', {
  sheet: 'submissions'
})

// 3. Write data to the 'submissions' alias
const { append } = useGSheetWrite({ sheet: 'submissions' })

const name = ref('')
const comment = ref('')

const handleNewSubmission = async () => {
  await append('A1:C1', [[String(Date.now()), name.value, comment.value]])
  name.value = ''
  comment.value = ''
  await refresh()
}
</script>

<template>
  <div class="enterprise-hub">
    <h1>Multi-Sheet Enterprise Hub</h1>

    <section class="section">
      <h2>Products (Source: Products Spreadsheet)</h2>
      <ul>
        <li
          v-for="prod in productList"
          :key="prod.id"
        >
          {{ prod.title }}
        </li>
      </ul>
    </section>

    <hr>

    <section class="section">
      <h2>User Submissions (Source: Apps Script Web App)</h2>
      <form @submit.prevent="handleNewSubmission">
        <input
          v-model="name"
          placeholder="Name"
          required
        >
        <input
          v-model="comment"
          placeholder="Comment"
          required
        >
        <button type="submit">
          Send Submission
        </button>
      </form>

      <ul>
        <li
          v-for="sub in userSubmissions"
          :key="sub.id"
        >
          <strong>{{ sub.name }}:</strong> {{ sub.comment }}
        </li>
      </ul>
    </section>
  </div>
</template>

Service Account HR & Payroll Tutorial

Build a secure, private enterprise HR management app using Service Account credentials.