EN
Tutorial Praktis

Tutorial Sheet Routing Map

Bangun hub enterprise multi-sheet menggunakan alias routing sheets di nuxt.config.ts.

Pelajari cara mengonfigurasi alias yang mudah dibaca untuk beberapa Google Spreadsheet dan Apps Script Web App sekaligus di nuxt.config.ts.

1. Setup Modul dengan Map sheets

Konfigurasikan peta routing sheet kamu di nuxt.config.ts:

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

  gsheet: {
    // Peta routing sheet yang memetakan nama alias bersih ke Spreadsheet ID / URL Apps Script
    sheets: {
      products: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
      orders: '19rQ1234567890abcdefghijklmnopqrstuvwxyz',
      submissions: 'https://script.google.com/macros/s/AKfycb.../exec'
    }
  }
})

2. Halaman Hub Enterprise Multi-Sheet

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

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

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

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

// 3. Tulis data ke alias 'submissions'
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>Hub Enterprise Multi-Sheet</h1>

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

    <hr>

    <section class="section">
      <h2>Pengiriman Pengguna (Sumber: Apps Script Web App)</h2>
      <form @submit.prevent="handleNewSubmission">
        <input
          v-model="name"
          placeholder="Nama"
          required
        >
        <input
          v-model="comment"
          placeholder="Komentar"
          required
        >
        <button type="submit">
          Kirim Data
        </button>
      </form>

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

Tutorial HR & Payroll Service Account

Bangun aplikasi manajemen HR enterprise yang aman dan privat menggunakan kredensial Service Account.