[{"data":1,"prerenderedAt":617},["ShallowReactive",2],{"navigation-en":3,"page-\u002Fen\u002Ftutorials\u002Fcsv-catalog-tutorial":134,"\u002Fen\u002Ftutorials\u002Fcsv-catalog-tutorial-surround":612},[4],{"title":5,"path":6,"stem":7,"children":8,"page":26},"En","\u002Fen","en",[9,27,48,77,90,97],{"title":10,"path":11,"stem":12,"children":13,"page":26},"Getting Started","\u002Fen\u002Fgetting-started","en\u002F1.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Introduction","\u002Fen\u002Fgetting-started\u002Fintroduction","en\u002F1.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Installation","\u002Fen\u002Fgetting-started\u002Finstallation","en\u002F1.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"Configuration Reference","\u002Fen\u002Fgetting-started\u002Fconfiguration","en\u002F1.getting-started\u002F3.configuration",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Composables","\u002Fen\u002Fcomposables","en\u002F2.composables",[32,36,40,44],{"title":33,"path":34,"stem":35},"useGSheet","\u002Fen\u002Fcomposables\u002Fuse-gsheet","en\u002F2.composables\u002F1.use-gsheet",{"title":37,"path":38,"stem":39},"useGSheetAsObject","\u002Fen\u002Fcomposables\u002Fuse-gsheet-as-object","en\u002F2.composables\u002F2.use-gsheet-as-object",{"title":41,"path":42,"stem":43},"useGSheetRow","\u002Fen\u002Fcomposables\u002Fuse-gsheet-row","en\u002F2.composables\u002F3.use-gsheet-row",{"title":45,"path":46,"stem":47},"useGSheetWrite","\u002Fen\u002Fcomposables\u002Fuse-gsheet-write","en\u002F2.composables\u002F4.use-gsheet-write",{"title":49,"path":50,"stem":51,"children":52,"page":26},"Authentication Modes","\u002Fen\u002Fauth-modes","en\u002F3.auth-modes",[53,57,61,65,69,73],{"title":54,"path":55,"stem":56},"Authentication Modes Overview","\u002Fen\u002Fauth-modes\u002Foverview","en\u002F3.auth-modes\u002F1.overview",{"title":58,"path":59,"stem":60},"GViz Mode (Google Visualization API)","\u002Fen\u002Fauth-modes\u002Fgviz","en\u002F3.auth-modes\u002F2.gviz",{"title":62,"path":63,"stem":64},"CSV Export Mode","\u002Fen\u002Fauth-modes\u002Fcsv","en\u002F3.auth-modes\u002F3.csv",{"title":66,"path":67,"stem":68},"Google Apps Script Mode","\u002Fen\u002Fauth-modes\u002Fappscript","en\u002F3.auth-modes\u002F4.appscript",{"title":70,"path":71,"stem":72},"API Key Mode","\u002Fen\u002Fauth-modes\u002Fapikey","en\u002F3.auth-modes\u002F5.apikey",{"title":74,"path":75,"stem":76},"Service Account Mode","\u002Fen\u002Fauth-modes\u002Fservice-account","en\u002F3.auth-modes\u002F6.service-account",{"title":78,"path":79,"stem":80,"children":81,"page":26},"AI","\u002Fen\u002Fai","en\u002F4.ai",[82,86],{"title":83,"path":84,"stem":85},"Agent Skills (AI Integration)","\u002Fen\u002Fai\u002Fagent-skills","en\u002F4.ai\u002F1.agent-skills",{"title":87,"path":88,"stem":89},"Model Context Protocol (MCP)","\u002Fen\u002Fai\u002Fmcp","en\u002F4.ai\u002F2.mcp",{"title":91,"path":92,"stem":93,"children":94},"Demos","\u002Fen\u002Fdemos","en\u002F5.demos\u002Findex",[95],{"title":96,"path":92,"stem":93},"Live Demos",{"title":98,"path":99,"stem":100,"children":101,"page":26},"Tutorials","\u002Fen\u002Ftutorials","en\u002F6.tutorials",[102,106,110,114,118,122,126,130],{"title":103,"path":104,"stem":105},"Tutorials Overview","\u002Fen\u002Ftutorials\u002Foverview","en\u002F6.tutorials\u002F0.overview",{"title":107,"path":108,"stem":109},"Apps Script Web App Tutorial","\u002Fen\u002Ftutorials\u002Fappscript-tutorial","en\u002F6.tutorials\u002F1.appscript-tutorial",{"title":111,"path":112,"stem":113},"Complete Step-by-Step Tutorial","\u002Fen\u002Ftutorials\u002Fstep-by-step","en\u002F6.tutorials\u002F1.step-by-step",{"title":115,"path":116,"stem":117},"GViz SQL Analytics Tutorial","\u002Fen\u002Ftutorials\u002Fgviz-sql-tutorial","en\u002F6.tutorials\u002F2.gviz-sql-tutorial",{"title":119,"path":120,"stem":121},"CSV Product Catalog Tutorial","\u002Fen\u002Ftutorials\u002Fcsv-catalog-tutorial","en\u002F6.tutorials\u002F3.csv-catalog-tutorial",{"title":123,"path":124,"stem":125},"API Key Inventory Tutorial","\u002Fen\u002Ftutorials\u002Fapikey-tutorial","en\u002F6.tutorials\u002F4.apikey-tutorial",{"title":127,"path":128,"stem":129},"Service Account HR & Payroll Tutorial","\u002Fen\u002Ftutorials\u002Fservice-account-tutorial","en\u002F6.tutorials\u002F5.service-account-tutorial",{"title":131,"path":132,"stem":133},"Sheet Routing Map Tutorial","\u002Fen\u002Ftutorials\u002Fsheets-routing-tutorial","en\u002F6.tutorials\u002F6.sheets-routing-tutorial",{"id":135,"title":119,"body":136,"description":606,"extension":607,"icon":608,"links":608,"meta":609,"navigation":608,"path":120,"seo":610,"stem":121,"__hash__":611},"docs_en\u002Fen\u002F6.tutorials\u002F3.csv-catalog-tutorial.md",{"type":137,"value":138,"toc":602},"minimark",[139,143,146,151,177,193,195,199,598],[140,141,142],"p",{},"Learn how to stream raw CSV data from public Google Sheets to render high-performance product catalogs.",[144,145],"hr",{},[147,148,150],"h2",{"id":149},"_1-setup","1. Setup",[152,153,154,163,169],"ol",{},[155,156,157,158,162],"li",{},"Create a public Google Sheet named ",[159,160,161],"strong",{},"Store Catalog",".",[155,164,165,166,162],{},"Share sheet as ",[159,167,168],{},"Anyone with the link can view",[155,170,171,172,176],{},"Add Spreadsheet ID to ",[173,174,175],"code",{},".env",":",[178,179,184],"pre",{"className":180,"code":181,"filename":175,"language":182,"meta":183,"style":183},"language-env shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","GSHEET_SPREADSHEET_ID=your-public-spreadsheet-id\n","env","",[173,185,186],{"__ignoreMap":183},[187,188,191],"span",{"class":189,"line":190},"line",1,[187,192,181],{},[144,194],{},[147,196,198],{"id":197},"_2-vue-component-implementation","2. Vue Component Implementation",[178,200,205],{"className":201,"code":202,"filename":203,"language":204,"meta":183,"style":183},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Fetch raw CSV grid\nconst { data: rawRows, pending } = await useGSheet('A1:E100', {\n  sheet: 'products'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"catalog\">\n    \u003Ch1>Public Store Catalog\u003C\u002Fh1>\n\n    \u003Cdiv v-if=\"pending\">\n      Streaming CSV data...\n    \u003C\u002Fdiv>\n    \u003Ctable v-else>\n      \u003Ctr\n        v-for=\"(row, rIdx) in rawRows\"\n        :key=\"rIdx\"\n      >\n        \u003Ctd\n          v-for=\"(cell, cIdx) in row\"\n          :key=\"cIdx\"\n        >\n          {{ cell }}\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftable>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Fcatalog.vue","vue",[173,206,207,239,246,300,317,325,335,342,352,375,396,401,422,428,438,451,460,476,491,497,506,521,536,542,548,559,570,579,589],{"__ignoreMap":183},[187,208,209,213,217,221,224,227,230,234,236],{"class":189,"line":190},[187,210,212],{"class":211},"sMK4o","\u003C",[187,214,216],{"class":215},"swJcz","script",[187,218,220],{"class":219},"spNyl"," setup",[187,222,223],{"class":219}," lang",[187,225,226],{"class":211},"=",[187,228,229],{"class":211},"\"",[187,231,233],{"class":232},"sfazB","ts",[187,235,229],{"class":211},[187,237,238],{"class":211},">\n",[187,240,242],{"class":189,"line":241},2,[187,243,245],{"class":244},"sHwdD","\u002F\u002F Fetch raw CSV grid\n",[187,247,249,252,255,258,260,264,267,270,273,276,280,284,287,290,293,295,297],{"class":189,"line":248},3,[187,250,251],{"class":219},"const",[187,253,254],{"class":211}," {",[187,256,257],{"class":215}," data",[187,259,176],{"class":211},[187,261,263],{"class":262},"sTEyZ"," rawRows",[187,265,266],{"class":211},",",[187,268,269],{"class":262}," pending ",[187,271,272],{"class":211},"}",[187,274,275],{"class":211}," =",[187,277,279],{"class":278},"s7zQu"," await",[187,281,283],{"class":282},"s2Zo4"," useGSheet",[187,285,286],{"class":262},"(",[187,288,289],{"class":211},"'",[187,291,292],{"class":232},"A1:E100",[187,294,289],{"class":211},[187,296,266],{"class":211},[187,298,299],{"class":211}," {\n",[187,301,303,306,308,311,314],{"class":189,"line":302},4,[187,304,305],{"class":215},"  sheet",[187,307,176],{"class":211},[187,309,310],{"class":211}," '",[187,312,313],{"class":232},"products",[187,315,316],{"class":211},"'\n",[187,318,320,322],{"class":189,"line":319},5,[187,321,272],{"class":211},[187,323,324],{"class":262},")\n",[187,326,328,331,333],{"class":189,"line":327},6,[187,329,330],{"class":211},"\u003C\u002F",[187,332,216],{"class":215},[187,334,238],{"class":211},[187,336,338],{"class":189,"line":337},7,[187,339,341],{"emptyLinePlaceholder":340},true,"\n",[187,343,345,347,350],{"class":189,"line":344},8,[187,346,212],{"class":211},[187,348,349],{"class":215},"template",[187,351,238],{"class":211},[187,353,355,358,361,364,366,368,371,373],{"class":189,"line":354},9,[187,356,357],{"class":211},"  \u003C",[187,359,360],{"class":215},"div",[187,362,363],{"class":219}," class",[187,365,226],{"class":211},[187,367,229],{"class":211},[187,369,370],{"class":232},"catalog",[187,372,229],{"class":211},[187,374,238],{"class":211},[187,376,378,381,384,387,390,392,394],{"class":189,"line":377},10,[187,379,380],{"class":211},"    \u003C",[187,382,383],{"class":215},"h1",[187,385,386],{"class":211},">",[187,388,389],{"class":262},"Public Store Catalog",[187,391,330],{"class":211},[187,393,383],{"class":215},[187,395,238],{"class":211},[187,397,399],{"class":189,"line":398},11,[187,400,341],{"emptyLinePlaceholder":340},[187,402,404,406,408,411,413,415,418,420],{"class":189,"line":403},12,[187,405,380],{"class":211},[187,407,360],{"class":215},[187,409,410],{"class":219}," v-if",[187,412,226],{"class":211},[187,414,229],{"class":211},[187,416,417],{"class":232},"pending",[187,419,229],{"class":211},[187,421,238],{"class":211},[187,423,425],{"class":189,"line":424},13,[187,426,427],{"class":262},"      Streaming CSV data...\n",[187,429,431,434,436],{"class":189,"line":430},14,[187,432,433],{"class":211},"    \u003C\u002F",[187,435,360],{"class":215},[187,437,238],{"class":211},[187,439,441,443,446,449],{"class":189,"line":440},15,[187,442,380],{"class":211},[187,444,445],{"class":215},"table",[187,447,448],{"class":219}," v-else",[187,450,238],{"class":211},[187,452,454,457],{"class":189,"line":453},16,[187,455,456],{"class":211},"      \u003C",[187,458,459],{"class":215},"tr\n",[187,461,463,466,468,470,473],{"class":189,"line":462},17,[187,464,465],{"class":219},"        v-for",[187,467,226],{"class":211},[187,469,229],{"class":211},[187,471,472],{"class":232},"(row, rIdx) in rawRows",[187,474,475],{"class":211},"\"\n",[187,477,479,482,484,486,489],{"class":189,"line":478},18,[187,480,481],{"class":219},"        :key",[187,483,226],{"class":211},[187,485,229],{"class":211},[187,487,488],{"class":232},"rIdx",[187,490,475],{"class":211},[187,492,494],{"class":189,"line":493},19,[187,495,496],{"class":211},"      >\n",[187,498,500,503],{"class":189,"line":499},20,[187,501,502],{"class":211},"        \u003C",[187,504,505],{"class":215},"td\n",[187,507,509,512,514,516,519],{"class":189,"line":508},21,[187,510,511],{"class":219},"          v-for",[187,513,226],{"class":211},[187,515,229],{"class":211},[187,517,518],{"class":232},"(cell, cIdx) in row",[187,520,475],{"class":211},[187,522,524,527,529,531,534],{"class":189,"line":523},22,[187,525,526],{"class":219},"          :key",[187,528,226],{"class":211},[187,530,229],{"class":211},[187,532,533],{"class":232},"cIdx",[187,535,475],{"class":211},[187,537,539],{"class":189,"line":538},23,[187,540,541],{"class":211},"        >\n",[187,543,545],{"class":189,"line":544},24,[187,546,547],{"class":262},"          {{ cell }}\n",[187,549,551,554,557],{"class":189,"line":550},25,[187,552,553],{"class":211},"        \u003C\u002F",[187,555,556],{"class":215},"td",[187,558,238],{"class":211},[187,560,562,565,568],{"class":189,"line":561},26,[187,563,564],{"class":211},"      \u003C\u002F",[187,566,567],{"class":215},"tr",[187,569,238],{"class":211},[187,571,573,575,577],{"class":189,"line":572},27,[187,574,433],{"class":211},[187,576,445],{"class":215},[187,578,238],{"class":211},[187,580,582,585,587],{"class":189,"line":581},28,[187,583,584],{"class":211},"  \u003C\u002F",[187,586,360],{"class":215},[187,588,238],{"class":211},[187,590,592,594,596],{"class":189,"line":591},29,[187,593,330],{"class":211},[187,595,349],{"class":215},[187,597,238],{"class":211},[599,600,601],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":183,"searchDepth":190,"depth":241,"links":603},[604,605],{"id":149,"depth":241,"text":150},{"id":197,"depth":241,"text":198},"Build an e-commerce product catalog using direct CSV export streams.","md",null,{},{"title":119,"description":606},"2AKO5l8g0enuKsntgMAWud7zgSinkwvrT-pd-Bk0U28",[613,615],{"title":115,"path":116,"stem":117,"description":614,"children":-1},"Build a dynamic sales analytics dashboard with GViz SQL query filtering.",{"title":123,"path":124,"stem":125,"description":616,"children":-1},"Build a public stock & inventory tracking system using GCP API Key.",1786088231094]