[{"data":1,"prerenderedAt":374},["ShallowReactive",2],{"navigation-id":3,"page-\u002Fid\u002Fgetting-started\u002Fintroduction":133,"\u002Fid\u002Fgetting-started\u002Fintroduction-surround":371},[4],{"title":5,"path":6,"stem":7,"children":8,"page":26},"Id","\u002Fid","id",[9,27,48,77,90,96],{"title":10,"path":11,"stem":12,"children":13,"page":26},"Panduan Memulai","\u002Fid\u002Fgetting-started","id\u002F1.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Pengenalan","\u002Fid\u002Fgetting-started\u002Fintroduction","id\u002F1.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Instalasi","\u002Fid\u002Fgetting-started\u002Finstallation","id\u002F1.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"Referensi Konfigurasi","\u002Fid\u002Fgetting-started\u002Fconfiguration","id\u002F1.getting-started\u002F3.configuration",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Composables","\u002Fid\u002Fcomposables","id\u002F2.composables",[32,36,40,44],{"title":33,"path":34,"stem":35},"useGSheet","\u002Fid\u002Fcomposables\u002Fuse-gsheet","id\u002F2.composables\u002F1.use-gsheet",{"title":37,"path":38,"stem":39},"useGSheetAsObject","\u002Fid\u002Fcomposables\u002Fuse-gsheet-as-object","id\u002F2.composables\u002F2.use-gsheet-as-object",{"title":41,"path":42,"stem":43},"useGSheetRow","\u002Fid\u002Fcomposables\u002Fuse-gsheet-row","id\u002F2.composables\u002F3.use-gsheet-row",{"title":45,"path":46,"stem":47},"useGSheetWrite","\u002Fid\u002Fcomposables\u002Fuse-gsheet-write","id\u002F2.composables\u002F4.use-gsheet-write",{"title":49,"path":50,"stem":51,"children":52,"page":26},"Mode Autentikasi","\u002Fid\u002Fauth-modes","id\u002F3.auth-modes",[53,57,61,65,69,73],{"title":54,"path":55,"stem":56},"Gambaran Umum Mode Autentikasi","\u002Fid\u002Fauth-modes\u002Foverview","id\u002F3.auth-modes\u002F1.overview",{"title":58,"path":59,"stem":60},"Mode GViz (Google Visualization API)","\u002Fid\u002Fauth-modes\u002Fgviz","id\u002F3.auth-modes\u002F2.gviz",{"title":62,"path":63,"stem":64},"Mode Ekspor CSV","\u002Fid\u002Fauth-modes\u002Fcsv","id\u002F3.auth-modes\u002F3.csv",{"title":66,"path":67,"stem":68},"Mode Google Apps Script","\u002Fid\u002Fauth-modes\u002Fappscript","id\u002F3.auth-modes\u002F4.appscript",{"title":70,"path":71,"stem":72},"Mode API Key","\u002Fid\u002Fauth-modes\u002Fapikey","id\u002F3.auth-modes\u002F5.apikey",{"title":74,"path":75,"stem":76},"Mode Service Account","\u002Fid\u002Fauth-modes\u002Fservice-account","id\u002F3.auth-modes\u002F6.service-account",{"title":78,"path":79,"stem":80,"children":81,"page":26},"Integrasi AI","\u002Fid\u002Fai","id\u002F4.ai",[82,86],{"title":83,"path":84,"stem":85},"Agent Skills (Integrasi AI)","\u002Fid\u002Fai\u002Fagent-skills","id\u002F4.ai\u002F1.agent-skills",{"title":87,"path":88,"stem":89},"Model Context Protocol (MCP)","\u002Fid\u002Fai\u002Fmcp","id\u002F4.ai\u002F2.mcp",{"title":91,"path":92,"stem":93,"children":94},"Demo Langsung","\u002Fid\u002Fdemos","id\u002F5.demos\u002Findex",[95],{"title":91,"path":92,"stem":93},{"title":97,"path":98,"stem":99,"children":100,"page":26},"Tutorial Praktis","\u002Fid\u002Ftutorials","id\u002F6.tutorials",[101,105,109,113,117,121,125,129],{"title":102,"path":103,"stem":104},"Gambaran Umum Tutorial","\u002Fid\u002Ftutorials\u002Foverview","id\u002F6.tutorials\u002F0.overview",{"title":106,"path":107,"stem":108},"Tutorial Apps Script Web App","\u002Fid\u002Ftutorials\u002Fappscript-tutorial","id\u002F6.tutorials\u002F1.appscript-tutorial",{"title":110,"path":111,"stem":112},"Tutorial Langkah demi Langkah Lengkap","\u002Fid\u002Ftutorials\u002Fstep-by-step","id\u002F6.tutorials\u002F1.step-by-step",{"title":114,"path":115,"stem":116},"Tutorial Analytics GViz SQL","\u002Fid\u002Ftutorials\u002Fgviz-sql-tutorial","id\u002F6.tutorials\u002F2.gviz-sql-tutorial",{"title":118,"path":119,"stem":120},"Tutorial Katalog Produk CSV","\u002Fid\u002Ftutorials\u002Fcsv-catalog-tutorial","id\u002F6.tutorials\u002F3.csv-catalog-tutorial",{"title":122,"path":123,"stem":124},"Tutorial Inventaris API Key","\u002Fid\u002Ftutorials\u002Fapikey-tutorial","id\u002F6.tutorials\u002F4.apikey-tutorial",{"title":126,"path":127,"stem":128},"Tutorial HR & Payroll Service Account","\u002Fid\u002Ftutorials\u002Fservice-account-tutorial","id\u002F6.tutorials\u002F5.service-account-tutorial",{"title":130,"path":131,"stem":132},"Tutorial Sheet Routing Map","\u002Fid\u002Ftutorials\u002Fsheets-routing-tutorial","id\u002F6.tutorials\u002F6.sheets-routing-tutorial",{"id":134,"title":15,"body":135,"description":365,"extension":366,"icon":367,"links":367,"meta":368,"navigation":367,"path":16,"seo":369,"stem":17,"__hash__":370},"docs_id\u002Fid\u002F1.getting-started\u002F1.introduction.md",{"type":136,"value":137,"toc":355},"minimark",[138,146,151,154,183,188,192,239,243,248,255,293,297,300,328,332,338],[139,140,141,145],"p",{},[142,143,144],"code",{},"nuxt-gsheet"," adalah modul integrasi Google Sheets zero-config, berkinerja tinggi, dan aman untuk Nuxt 3 dan Nuxt 4. Modul ini memungkinkan kamu menggunakan Google Sheets sebagai CMS ringan atau database secara seamless dengan keamanan server-side proxy, stampede-proof caching, multi-mode autentikasi, dan tab khusus di Nuxt DevTools.",[147,148,150],"h2",{"id":149},"mengapa-nuxt-gsheet","Mengapa nuxt-gsheet?",[139,152,153],{},"Google Sheets sangat populer digunakan sebagai content management system (CMS), database prototipe, maupun penyimpanan data cepat karena kemudahannya dan fitur kolaborasi real-time. Namun, melakukan query ke Google Sheets secara langsung dari aplikasi frontend menyimpan beberapa kendala utama:",[155,156,157,165,171,177],"ul",{},[158,159,160,164],"li",{},[161,162,163],"strong",{},"Risiko Keamanan",": Mengekspos Spreadsheet ID, API Key, atau kredensial Service Account secara langsung di client-side dapat memicu penyalahgunaan akses dan pencurian API key.",[158,166,167,170],{},[161,168,169],{},"Batas Kuota & Rate Limit",": Request yang terlalu sering dari client-side akan dengan cepat menghabiskan kuota Google API atau memicu pembatasan eksekusi Google Apps Script.",[158,172,173,176],{},[161,174,175],{},"Cache Stampede",": Saat banyak pengguna mengakses situs secara bersamaan ketika cache kedaluwarsa, ratusan request serentak akan membanjiri endpoint Google API, menyebabkan error rate limit (HTTP 429).",[158,178,179,182],{},[161,180,181],{},"Kompleksitas Setup",": Mengatur alur antara public sheet, proxy Google Apps Script, endpoint GViz, dan private Service Account biasanya mengharuskan kita menulis backend proxy sendiri.",[139,184,185,187],{},[142,186,144],{}," menyelesaikan seluruh masalah tersebut secara out-of-the-box tanpa perlu konfigurasi rumit.",[147,189,191],{"id":190},"fitur-utama","Fitur Utama",[155,193,194,200,210,216,233],{},[158,195,196,199],{},[161,197,198],{},"⚡️ Auto-Detection Multi-Auth",": Mendukung Google Sheets API v4 (API Key & Service Account), proxy Google Apps Script Web App, Google Visualization API (GViz), dan ekspor CSV langsung.",[158,201,202,205,206,209],{},[161,203,204],{},"🔒 Secure Server Proxy",": Meng-intercept request di sisi server (",[142,207,208],{},"\u002Fapi\u002F_gsheet\u002F*","). Kredensial dan endpoint spreadsheet tetap tersembunyi dengan aman dari client browser.",[158,211,212,215],{},[161,213,214],{},"🛡️ Perlindungan Cache Stampede",": Tetap menyajikan stale cache saat terjadi kegagalan jaringan atau pembatasan kuota, serta menggabungkan request identik yang terjadi bersamaan menjadi satu request upstream saja.",[158,217,218,221,222,224,225,224,227,229,230,232],{},[161,219,220],{},"🧪 Type-Safe Composables",": Menyediakan Vue composable ter-auto-import (",[142,223,33],{},", ",[142,226,37],{},[142,228,41],{},", dan ",[142,231,45],{},") dengan auto-completion TypeScript penuh.",[158,234,235,238],{},[161,236,237],{},"📊 Integrasi Nuxt DevTools",": Memantau request API yang ter-intercept, rasio cache hit\u002Fmiss, mode auth yang aktif, dan estimasi penggunaan kuota langsung dari Nuxt DevTools.",[147,240,242],{"id":241},"cara-kerja","Cara Kerja",[139,244,245,247],{},[142,246,144],{}," bertindak sebagai middleware penyeimbang antara aplikasi Nuxt kamu dan Google Sheets.",[139,249,250],{},[251,252],"img",{"alt":253,"src":254},"Cara Kerja Nuxt GSheet","\u002Fdocs\u002Fnuxt-gsheet.webp",[256,257,258,268,277,287],"ol",{},[158,259,260,263,264,267],{},[161,261,262],{},"Client Request",": Komponen Vue memanggil composable seperti ",[142,265,266],{},"useGSheetAsObject('A1:C10')",".",[158,269,270,273,274,276],{},[161,271,272],{},"Server Handling",": Request diarahkan ke Nitro server internal milik Nuxt (",[142,275,208],{},").",[158,278,279,282,283,286],{},[161,280,281],{},"Cache & Stampede Check",": Jika data valid tersedia di cache, data langsung dikembalikan. Jika cache sudah usang atau belum ada, hanya ",[161,284,285],{},"satu"," request yang dikirim ke Google Sheets, seberapa banyak pun komponen client yang memintanya secara bersamaan.",[158,288,289,292],{},[161,290,291],{},"Data Formatting",": Nilai cell mentah dikonversi menjadi objek JavaScript atau array berstruktur dan dikembalikan secara aman ke aplikasi client.",[147,294,296],{"id":295},"prasyarat","Prasyarat",[139,298,299],{},"Sebelum memulai, pastikan lingkungan pengembangan kamu memenuhi prasyarat berikut:",[155,301,302,315],{},[158,303,304,307,308,311,312],{},[161,305,306],{},"Nuxt",": Versi ",[142,309,310],{},"^3.10.0"," atau Nuxt ",[142,313,314],{},"4.x",[158,316,317,307,320,323,324,327],{},[161,318,319],{},"Node.js",[142,321,322],{},"^18.0.0"," atau lebih baru (atau Bun ",[142,325,326],{},"^1.0.0",")",[147,329,331],{"id":330},"langkah-selanjutnya","Langkah Selanjutnya",[139,333,334,335,337],{},"Setelah memahami konsep dasar ",[142,336,144],{},", kamu siap memasangnya di proyekmu:",[155,339,340,346,350],{},[158,341,342],{},[343,344,345],"a",{"href":20},"Instalasi & Panduan Cepat",[158,347,348],{},[343,349,23],{"href":24},[158,351,352],{},[343,353,354],{"href":34},"Gambaran Umum Composables",{"title":356,"searchDepth":357,"depth":358,"links":359},"",1,2,[360,361,362,363,364],{"id":149,"depth":358,"text":150},{"id":190,"depth":358,"text":191},{"id":241,"depth":358,"text":242},{"id":295,"depth":358,"text":296},{"id":330,"depth":358,"text":331},"Gambaran umum arsitektur nuxt-gsheet, fitur utama, dan keunggulannya.","md",null,{},{"title":15,"description":365},"KTclztwDBfBfAfrwDN7wpti8S9gITqMr_qZ3U9T9Ghg",[367,372],{"title":19,"path":20,"stem":21,"description":373,"children":-1},"Pasang package nuxt-gsheet, daftarkan modul, dan atur environment variable.",1786088226563]