[{"data":1,"prerenderedAt":1476},["ShallowReactive",2],{"navigation":3,"\u002Fguide\u002Fclient":208,"\u002Fguide\u002Fclient-surround":1471},[4,98,175],{"title":5,"path":6,"stem":7,"children":8,"icon":97},"Guide","\u002Fguide","1.guide\u002F1.index",[9,12,17,22,46,61,79],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fguide\u002Finstallation","1.guide\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Quick start","\u002Fguide\u002Fquick-start","1.guide\u002F3.quick-start","i-lucide-rocket",{"title":23,"path":24,"stem":25,"children":26,"icon":45},"Server","\u002Fguide\u002Fserver","1.guide\u002F4.server\u002F1.index",[27,30,35,40],{"title":28,"path":24,"stem":25,"icon":29},"Usage","i-lucide-server",{"title":31,"path":32,"stem":33,"icon":34},"Config file","\u002Fguide\u002Fserver\u002Fconfig-file","1.guide\u002F4.server\u002F2.config-file","i-lucide-file-cog",{"title":36,"path":37,"stem":38,"icon":39},"Options","\u002Fguide\u002Fserver\u002Foptions","1.guide\u002F4.server\u002F3.options","i-lucide-settings",{"title":41,"path":42,"stem":43,"icon":44},"Advanced","\u002Fguide\u002Fserver\u002Fadvanced","1.guide\u002F4.server\u002F4.advanced","i-lucide-flask-conical",false,{"title":47,"path":48,"stem":49,"children":50,"icon":45},"Client","\u002Fguide\u002Fclient","1.guide\u002F5.client\u002F1.index",[51,53,58],{"title":28,"path":48,"stem":49,"icon":52},"i-lucide-monitor-smartphone",{"title":54,"path":55,"stem":56,"icon":57},"Live queries","\u002Fguide\u002Fclient\u002Flive-queries","1.guide\u002F5.client\u002F2.live-queries","i-lucide-radio",{"title":41,"path":59,"stem":60,"icon":44},"\u002Fguide\u002Fclient\u002Fadvanced","1.guide\u002F5.client\u002F3.advanced",{"title":62,"path":63,"stem":64,"children":65,"icon":45},"Development socket","\u002Fguide\u002Fsocket","1.guide\u002F6.socket\u002F1.index",[66,68,71,74],{"title":28,"path":63,"stem":64,"icon":67},"i-lucide-plug",{"title":36,"path":69,"stem":70,"icon":39},"\u002Fguide\u002Fsocket\u002Foptions","1.guide\u002F6.socket\u002F2.options",{"title":41,"path":72,"stem":73,"icon":44},"\u002Fguide\u002Fsocket\u002Fadvanced","1.guide\u002F6.socket\u002F3.advanced",{"title":75,"path":76,"stem":77,"icon":78},"PGlite in dev, Postgres in prod","\u002Fguide\u002Fsocket\u002Fdevelopment-only","1.guide\u002F6.socket\u002F4.development-only","i-lucide-cloud-upload",{"title":80,"path":81,"stem":82,"children":83,"icon":45},"DevTools & tooling","\u002Fguide\u002Fdevtools","1.guide\u002F7.devtools\u002F1.index",[84,87,92],{"title":85,"path":81,"stem":82,"icon":86},"DevTools tab","i-lucide-wrench",{"title":88,"path":89,"stem":90,"icon":91},"Actions","\u002Fguide\u002Fdevtools\u002Factions","1.guide\u002F7.devtools\u002F2.actions","i-lucide-zap",{"title":93,"path":94,"stem":95,"icon":96},"Terminal","\u002Fguide\u002Fdevtools\u002Fterminal","1.guide\u002F7.devtools\u002F3.terminal","i-lucide-square-terminal","i-lucide-book-open",{"title":99,"icon":100,"path":101,"stem":102,"children":103,"page":45},"Recipes","i-lucide-chef-hat","\u002Frecipes","2.recipes",[104,116,138,159,171],{"title":105,"path":106,"stem":107,"children":108,"icon":45},"Migrations","\u002Frecipes\u002Fmigrations","2.recipes\u002F1.migrations\u002F1.index",[109,111],{"title":28,"path":106,"stem":107,"icon":110},"i-lucide-database-backup",{"title":112,"path":113,"stem":114,"icon":115},"Edited migrations","\u002Frecipes\u002Fmigrations\u002Fedited-migrations","2.recipes\u002F1.migrations\u002F2.edited-migrations","i-lucide-file-diff",{"title":117,"path":118,"stem":119,"children":120,"icon":45},"Testing","\u002Frecipes\u002Ftesting","2.recipes\u002F2.testing\u002F1.index",[121,123,128,133],{"title":28,"path":118,"stem":119,"icon":122},"i-lucide-test-tube",{"title":124,"path":125,"stem":126,"icon":127},"Isolation","\u002Frecipes\u002Ftesting\u002Fisolation","2.recipes\u002F2.testing\u002F2.isolation","i-lucide-git-fork",{"title":129,"path":130,"stem":131,"icon":132},"vitest","\u002Frecipes\u002Ftesting\u002Fvitest","2.recipes\u002F2.testing\u002F3.vitest","i-simple-icons-vitest",{"title":134,"path":135,"stem":136,"icon":137},"@nuxt\u002Ftest-utils","\u002Frecipes\u002Ftesting\u002Fnuxt-test-utils","2.recipes\u002F2.testing\u002F4.nuxt-test-utils","i-simple-icons-nuxt",{"title":139,"path":140,"stem":141,"children":142,"icon":45},"Deploy","\u002Frecipes\u002Fdeploy","2.recipes\u002F3.deploy\u002F1.index",[143,144,149,154],{"title":139,"path":140,"stem":141},{"title":145,"path":146,"stem":147,"icon":148},"Any Postgres","\u002Frecipes\u002Fdeploy\u002Fpostgres","2.recipes\u002F3.deploy\u002F2.postgres","i-lucide-database",{"title":150,"path":151,"stem":152,"icon":153},"Netlify","\u002Frecipes\u002Fdeploy\u002Fnetlify","2.recipes\u002F3.deploy\u002F3.netlify","i-simple-icons-netlify",{"title":155,"path":156,"stem":157,"icon":158},"Neon","\u002Frecipes\u002Fdeploy\u002Fneon","2.recipes\u002F3.deploy\u002F4.neon","i-simple-icons-neon",{"title":160,"path":161,"stem":162,"children":163,"icon":45},"Outside Nuxt","\u002Frecipes\u002Foutside-nuxt","2.recipes\u002F4.outside-nuxt\u002F1.index",[164,167],{"title":165,"path":161,"stem":162,"icon":166},"Config and provider","i-lucide-package",{"title":168,"path":169,"stem":170,"icon":67},"Socket server","\u002Frecipes\u002Foutside-nuxt\u002Fsocket","2.recipes\u002F4.outside-nuxt\u002F2.socket",{"title":172,"path":173,"stem":174,"icon":67},"Nitro's useDatabase","\u002Frecipes\u002Fnitro-database","2.recipes\u002F5.nitro-database",{"title":176,"icon":177,"path":178,"stem":179,"children":180,"page":45},"Reference","i-lucide-code-xml","\u002Freference","3.reference",[181,185,189,193,198,203],{"title":182,"path":183,"stem":184,"icon":34},"Config files","\u002Freference\u002Fconfig-files","3.reference\u002F1.config-files",{"title":186,"path":187,"stem":188,"icon":39},"Module options","\u002Freference\u002Fmodule-options","3.reference\u002F2.module-options",{"title":190,"path":191,"stem":192,"icon":67},"Socket options","\u002Freference\u002Fsocket-options","3.reference\u002F3.socket-options",{"title":194,"path":195,"stem":196,"icon":197},"Exports","\u002Freference\u002Fexports","3.reference\u002F4.exports","i-lucide-boxes",{"title":199,"path":200,"stem":201,"icon":202},"Hooks","\u002Freference\u002Fhooks","3.reference\u002F5.hooks","i-lucide-anchor",{"title":204,"path":205,"stem":206,"icon":207},"Environment","\u002Freference\u002Fenvironment","3.reference\u002F6.environment","i-lucide-variable",{"id":209,"title":210,"body":211,"description":1464,"extension":1465,"links":1466,"meta":1467,"navigation":1468,"path":48,"seo":1469,"stem":49,"__hash__":1470},"docs\u002F1.guide\u002F5.client\u002F1.index.md","Client instance",{"type":212,"value":213,"toc":1458},"minimark",[214,218,304,309,319,532,538,636,642,646,669,926,997,1007,1011,1021,1024,1027,1431,1439,1443,1454],[215,216,217],"p",{},"The client side runs PGlite in the browser: in a Web Worker, so queries never block the page, and shared between the tabs of your app. It is off by default.",[219,220,226],"pre",{"className":221,"code":222,"filename":223,"language":224,"meta":225,"style":225},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  pglite: {\n    client: { enabled: true },\n  },\n})\n","nuxt.config.ts","ts","",[227,228,229,253,266,289,295],"code",{"__ignoreMap":225},[230,231,234,238,241,245,249],"span",{"class":232,"line":233},"line",1,[230,235,237],{"class":236},"s7zQu","export",[230,239,240],{"class":236}," default",[230,242,244],{"class":243},"s2Zo4"," defineNuxtConfig",[230,246,248],{"class":247},"sTEyZ","(",[230,250,252],{"class":251},"sMK4o","{\n",[230,254,256,260,263],{"class":232,"line":255},2,[230,257,259],{"class":258},"swJcz","  pglite",[230,261,262],{"class":251},":",[230,264,265],{"class":251}," {\n",[230,267,269,272,274,277,280,282,286],{"class":232,"line":268},3,[230,270,271],{"class":258},"    client",[230,273,262],{"class":251},[230,275,276],{"class":251}," {",[230,278,279],{"class":258}," enabled",[230,281,262],{"class":251},[230,283,285],{"class":284},"sfNiH"," true",[230,287,288],{"class":251}," },\n",[230,290,292],{"class":232,"line":291},4,[230,293,294],{"class":251},"  },\n",[230,296,298,301],{"class":232,"line":297},5,[230,299,300],{"class":251},"}",[230,302,303],{"class":247},")\n",[305,306,308],"h2",{"id":307},"the-config-file","The config file",[215,310,311,314,315,318],{},[227,312,313],{},"app\u002Fpglite.config.ts"," holds what cannot be plain JSON: extensions, ",[227,316,317],{},"init",", per-environment settings.",[219,320,322],{"className":221,"code":321,"filename":313,"language":224,"meta":225,"style":225},"import { live } from '@electric-sql\u002Fpglite\u002Flive'\nimport { vector } from '@electric-sql\u002Fpglite-pgvector'\n\nexport default definePGliteClientConfig({\n  dataDir: 'idb:\u002F\u002Fmy-app',\n  extensions: { vector }, \u002F\u002F loaded in the worker, next to the database\n  clientExtensions: { live }, \u002F\u002F loaded on the main thread, typed on the instance\n  init: async (pg) => {\n    await pg.exec('CREATE EXTENSION IF NOT EXISTS vector')\n    await pg.exec('CREATE TABLE IF NOT EXISTS todos (id serial PRIMARY KEY, title text)')\n  },\n})\n",[227,323,324,350,370,376,389,407,427,445,472,498,520,525],{"__ignoreMap":225},[230,325,326,329,331,334,337,340,343,347],{"class":232,"line":233},[230,327,328],{"class":236},"import",[230,330,276],{"class":251},[230,332,333],{"class":247}," live",[230,335,336],{"class":251}," }",[230,338,339],{"class":236}," from",[230,341,342],{"class":251}," '",[230,344,346],{"class":345},"sfazB","@electric-sql\u002Fpglite\u002Flive",[230,348,349],{"class":251},"'\n",[230,351,352,354,356,359,361,363,365,368],{"class":232,"line":255},[230,353,328],{"class":236},[230,355,276],{"class":251},[230,357,358],{"class":247}," vector",[230,360,336],{"class":251},[230,362,339],{"class":236},[230,364,342],{"class":251},[230,366,367],{"class":345},"@electric-sql\u002Fpglite-pgvector",[230,369,349],{"class":251},[230,371,372],{"class":232,"line":268},[230,373,375],{"emptyLinePlaceholder":374},true,"\n",[230,377,378,380,382,385,387],{"class":232,"line":291},[230,379,237],{"class":236},[230,381,240],{"class":236},[230,383,384],{"class":243}," definePGliteClientConfig",[230,386,248],{"class":247},[230,388,252],{"class":251},[230,390,391,394,396,398,401,404],{"class":232,"line":297},[230,392,393],{"class":258},"  dataDir",[230,395,262],{"class":251},[230,397,342],{"class":251},[230,399,400],{"class":345},"idb:\u002F\u002Fmy-app",[230,402,403],{"class":251},"'",[230,405,406],{"class":251},",\n",[230,408,410,413,415,417,420,423],{"class":232,"line":409},6,[230,411,412],{"class":258},"  extensions",[230,414,262],{"class":251},[230,416,276],{"class":251},[230,418,419],{"class":247}," vector ",[230,421,422],{"class":251},"},",[230,424,426],{"class":425},"sHwdD"," \u002F\u002F loaded in the worker, next to the database\n",[230,428,430,433,435,437,440,442],{"class":232,"line":429},7,[230,431,432],{"class":258},"  clientExtensions",[230,434,262],{"class":251},[230,436,276],{"class":251},[230,438,439],{"class":247}," live ",[230,441,422],{"class":251},[230,443,444],{"class":425}," \u002F\u002F loaded on the main thread, typed on the instance\n",[230,446,448,451,453,457,460,464,467,470],{"class":232,"line":447},8,[230,449,450],{"class":243},"  init",[230,452,262],{"class":251},[230,454,456],{"class":455},"spNyl"," async",[230,458,459],{"class":251}," (",[230,461,463],{"class":462},"sHdIc","pg",[230,465,466],{"class":251},")",[230,468,469],{"class":455}," =>",[230,471,265],{"class":251},[230,473,475,478,481,484,487,489,491,494,496],{"class":232,"line":474},9,[230,476,477],{"class":236},"    await",[230,479,480],{"class":247}," pg",[230,482,483],{"class":251},".",[230,485,486],{"class":243},"exec",[230,488,248],{"class":258},[230,490,403],{"class":251},[230,492,493],{"class":345},"CREATE EXTENSION IF NOT EXISTS vector",[230,495,403],{"class":251},[230,497,303],{"class":258},[230,499,501,503,505,507,509,511,513,516,518],{"class":232,"line":500},10,[230,502,477],{"class":236},[230,504,480],{"class":247},[230,506,483],{"class":251},[230,508,486],{"class":243},[230,510,248],{"class":258},[230,512,403],{"class":251},[230,514,515],{"class":345},"CREATE TABLE IF NOT EXISTS todos (id serial PRIMARY KEY, title text)",[230,517,403],{"class":251},[230,519,303],{"class":258},[230,521,523],{"class":232,"line":522},11,[230,524,294],{"class":251},[230,526,528,530],{"class":232,"line":527},12,[230,529,300],{"class":251},[230,531,303],{"class":247},[215,533,534,537],{},[227,535,536],{},"definePGliteClientConfig"," is auto-imported. It accepts PGlite's worker options plus:",[539,540,541,559,579,593,604,618],"ul",{},[542,543,544,550,551,554,555,558],"li",{},[545,546,547],"strong",{},[227,548,549],{},"extensions",": Postgres extensions (",[227,552,553],{},"vector",", the ",[227,556,557],{},"contrib"," ones, …), loaded in the worker where the database runs.",[542,560,561,566,567,570,571,574,575,578],{},[545,562,563],{},[227,564,565],{},"clientExtensions",": extensions that add a JavaScript namespace to the instance (",[227,568,569],{},"live",", ",[227,572,573],{},"electricSync","), loaded on the main thread and typed on what ",[227,576,577],{},"usePGlite()"," returns. This is how PGlite itself splits them.",[542,580,581,585,586,570,589,592],{},[545,582,583],{},[227,584,317],{},": runs once in each tab that creates the instance, before it is handed out. Write it to be repeatable (",[227,587,588],{},"IF NOT EXISTS",[227,590,591],{},"ON CONFLICT DO NOTHING","), since every tab runs it.",[542,594,595,600,601,483],{},[545,596,597],{},[227,598,599],{},"dispose",": runs before the instance is closed through ",[227,602,603],{},"pglite.close()",[542,605,606,611,612,617],{},[545,607,608],{},[227,609,610],{},"devtoolsActions",": ",[613,614,616],"a",{"href":615},"\u002Fguide\u002Fdevtools\u002Factions#client-actions","client actions"," for Nuxt DevTools.",[542,619,620,631,632,483],{},[545,621,622,570,625,570,628],{},[227,623,624],{},"$development",[227,626,627],{},"$production",[227,629,630],{},"$test",": per-environment overrides, as on the ",[613,633,635],{"href":634},"\u002Fguide\u002Fserver\u002Fconfig-file#per-environment-settings","server",[215,637,638,639,641],{},"The file is imported by both the main thread and the worker. Keep it to package and relative imports: the worker bundle has no auto-imports, which is why ",[227,640,536],{}," is provided there as a global.",[305,643,645],{"id":644},"querying-from-components","Querying from components",[215,647,648,650,651,657,658,661,662,570,665,668],{},[227,649,577],{}," resolves to the instance, starting the worker on first call (or when the app loads, with ",[613,652,654],{"href":653},"\u002Freference\u002Fmodule-options#client",[227,655,656],{},"eager","). PGlite runs in the browser only, so call it from client-only code: a ",[227,659,660],{},".client.vue"," component, a component behind ",[227,663,664],{},"\u003CClientOnly>",[227,666,667],{},"onMounted",", or an event handler.",[219,670,675],{"className":671,"code":672,"filename":673,"language":674,"meta":225,"style":225},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst title = ref('')\n\nasync function add() {\n  const pg = await usePGlite()\n  await pg.query('INSERT INTO todos (title) VALUES ($1)', [title.value])\n  title.value = ''\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"add\">\n    \u003Cinput v-model=\"title\" \u002F>\n    \u003Cbutton>Add\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FAddTodo.vue","vue",[227,676,677,704,724,728,744,763,801,815,820,829,833,842,864,887,907,917],{"__ignoreMap":225},[230,678,679,682,685,688,691,694,697,699,701],{"class":232,"line":233},[230,680,681],{"class":251},"\u003C",[230,683,684],{"class":258},"script",[230,686,687],{"class":455}," setup",[230,689,690],{"class":455}," lang",[230,692,693],{"class":251},"=",[230,695,696],{"class":251},"\"",[230,698,224],{"class":345},[230,700,696],{"class":251},[230,702,703],{"class":251},">\n",[230,705,706,709,712,714,717,719,722],{"class":232,"line":255},[230,707,708],{"class":455},"const",[230,710,711],{"class":247}," title ",[230,713,693],{"class":251},[230,715,716],{"class":243}," ref",[230,718,248],{"class":247},[230,720,721],{"class":251},"''",[230,723,303],{"class":247},[230,725,726],{"class":232,"line":268},[230,727,375],{"emptyLinePlaceholder":374},[230,729,730,733,736,739,742],{"class":232,"line":291},[230,731,732],{"class":455},"async",[230,734,735],{"class":455}," function",[230,737,738],{"class":243}," add",[230,740,741],{"class":251},"()",[230,743,265],{"class":251},[230,745,746,749,751,754,757,760],{"class":232,"line":297},[230,747,748],{"class":455},"  const",[230,750,480],{"class":247},[230,752,753],{"class":251}," =",[230,755,756],{"class":236}," await",[230,758,759],{"class":243}," usePGlite",[230,761,762],{"class":258},"()\n",[230,764,765,768,770,772,775,777,779,782,784,787,790,793,795,798],{"class":232,"line":409},[230,766,767],{"class":236},"  await",[230,769,480],{"class":247},[230,771,483],{"class":251},[230,773,774],{"class":243},"query",[230,776,248],{"class":258},[230,778,403],{"class":251},[230,780,781],{"class":345},"INSERT INTO todos (title) VALUES ($1)",[230,783,403],{"class":251},[230,785,786],{"class":251},",",[230,788,789],{"class":258}," [",[230,791,792],{"class":247},"title",[230,794,483],{"class":251},[230,796,797],{"class":247},"value",[230,799,800],{"class":258},"])\n",[230,802,803,806,808,810,812],{"class":232,"line":429},[230,804,805],{"class":247},"  title",[230,807,483],{"class":251},[230,809,797],{"class":247},[230,811,753],{"class":251},[230,813,814],{"class":251}," ''\n",[230,816,817],{"class":232,"line":447},[230,818,819],{"class":251},"}\n",[230,821,822,825,827],{"class":232,"line":474},[230,823,824],{"class":251},"\u003C\u002F",[230,826,684],{"class":258},[230,828,703],{"class":251},[230,830,831],{"class":232,"line":500},[230,832,375],{"emptyLinePlaceholder":374},[230,834,835,837,840],{"class":232,"line":522},[230,836,681],{"class":251},[230,838,839],{"class":258},"template",[230,841,703],{"class":251},[230,843,844,847,850,853,855,857,860,862],{"class":232,"line":527},[230,845,846],{"class":251},"  \u003C",[230,848,849],{"class":258},"form",[230,851,852],{"class":455}," @submit.prevent",[230,854,693],{"class":251},[230,856,696],{"class":251},[230,858,859],{"class":345},"add",[230,861,696],{"class":251},[230,863,703],{"class":251},[230,865,867,870,873,876,878,880,882,884],{"class":232,"line":866},13,[230,868,869],{"class":251},"    \u003C",[230,871,872],{"class":258},"input",[230,874,875],{"class":455}," v-model",[230,877,693],{"class":251},[230,879,696],{"class":251},[230,881,792],{"class":345},[230,883,696],{"class":251},[230,885,886],{"class":251}," \u002F>\n",[230,888,890,892,895,898,901,903,905],{"class":232,"line":889},14,[230,891,869],{"class":251},[230,893,894],{"class":258},"button",[230,896,897],{"class":251},">",[230,899,900],{"class":247},"Add",[230,902,824],{"class":251},[230,904,894],{"class":258},[230,906,703],{"class":251},[230,908,910,913,915],{"class":232,"line":909},15,[230,911,912],{"class":251},"  \u003C\u002F",[230,914,849],{"class":258},[230,916,703],{"class":251},[230,918,920,922,924],{"class":232,"line":919},16,[230,921,824],{"class":251},[230,923,839],{"class":258},[230,925,703],{"class":251},[219,927,930],{"className":671,"code":928,"filename":929,"language":674,"meta":225,"style":225},"\u003Ctemplate>\n  \u003CClientOnly>\n    \u003CTodoList \u002F>\n    \u003Ctemplate #fallback>Loading…\u003C\u002Ftemplate>\n  \u003C\u002FClientOnly>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Ftodos.vue",[227,931,932,940,949,958,981,989],{"__ignoreMap":225},[230,933,934,936,938],{"class":232,"line":233},[230,935,681],{"class":251},[230,937,839],{"class":258},[230,939,703],{"class":251},[230,941,942,944,947],{"class":232,"line":255},[230,943,846],{"class":251},[230,945,946],{"class":258},"ClientOnly",[230,948,703],{"class":251},[230,950,951,953,956],{"class":232,"line":268},[230,952,869],{"class":251},[230,954,955],{"class":258},"TodoList",[230,957,886],{"class":251},[230,959,960,962,964,967,970,972,975,977,979],{"class":232,"line":291},[230,961,869],{"class":251},[230,963,839],{"class":258},[230,965,966],{"class":251}," #",[230,968,969],{"class":455},"fallback",[230,971,897],{"class":251},[230,973,974],{"class":247},"Loading…",[230,976,824],{"class":251},[230,978,839],{"class":258},[230,980,703],{"class":251},[230,982,983,985,987],{"class":232,"line":297},[230,984,912],{"class":251},[230,986,946],{"class":258},[230,988,703],{"class":251},[230,990,991,993,995],{"class":232,"line":409},[230,992,824],{"class":251},[230,994,839],{"class":258},[230,996,703],{"class":251},[215,998,999,1000,1002,1003,1006],{},"During server-side rendering ",[227,1001,577],{}," throws, so a call in ",[227,1004,1005],{},"setup"," of a component that also renders on the server fails the page.",[305,1008,1010],{"id":1009},"try-it","Try it",[215,1012,1013,1014,1017,1018,1020],{},"The SQL box below runs against this site's own client instance, with a ",[227,1015,1016],{},"planets"," table seeded by ",[227,1019,317],{},". Statements you run are stored in your browser (IndexedDB).",[1022,1023],"pglite-sql-playground",{},[215,1025,1026],{},"The component behind it does little more than this:",[219,1028,1031],{"className":671,"code":1029,"filename":1030,"language":674,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nconst sql = ref('SELECT * FROM planets ORDER BY moons DESC')\nconst results = shallowRef\u003C{ fields: string[]; rows: unknown[][] }[]>([])\nconst error = ref\u003Cstring>()\n\nasync function run() {\n  error.value = undefined\n  try {\n    const pg = await usePGlite()\n    const output = await pg.exec(sql.value, { rowMode: 'array' })\n    results.value = output.map((result) => ({\n      fields: result.fields.map((field) => field.name),\n      rows: result.rows as unknown[][],\n    }))\n  } catch (cause) {\n    error.value = cause instanceof Error ? cause.message : String(cause)\n  }\n}\n\u003C\u002Fscript>\n","app\u002Fcomponents\u002FSqlRunner.client.vue",[227,1032,1033,1053,1075,1125,1145,1149,1162,1176,1183,1198,1244,1277,1319,1343,1351,1369,1411,1417,1422],{"__ignoreMap":225},[230,1034,1035,1037,1039,1041,1043,1045,1047,1049,1051],{"class":232,"line":233},[230,1036,681],{"class":251},[230,1038,684],{"class":258},[230,1040,687],{"class":455},[230,1042,690],{"class":455},[230,1044,693],{"class":251},[230,1046,696],{"class":251},[230,1048,224],{"class":345},[230,1050,696],{"class":251},[230,1052,703],{"class":251},[230,1054,1055,1057,1060,1062,1064,1066,1068,1071,1073],{"class":232,"line":255},[230,1056,708],{"class":455},[230,1058,1059],{"class":247}," sql ",[230,1061,693],{"class":251},[230,1063,716],{"class":243},[230,1065,248],{"class":247},[230,1067,403],{"class":251},[230,1069,1070],{"class":345},"SELECT * FROM planets ORDER BY moons DESC",[230,1072,403],{"class":251},[230,1074,303],{"class":247},[230,1076,1077,1079,1082,1084,1087,1090,1093,1095,1099,1102,1105,1108,1110,1113,1116,1118,1120,1122],{"class":232,"line":268},[230,1078,708],{"class":455},[230,1080,1081],{"class":247}," results ",[230,1083,693],{"class":251},[230,1085,1086],{"class":243}," shallowRef",[230,1088,1089],{"class":251},"\u003C{",[230,1091,1092],{"class":258}," fields",[230,1094,262],{"class":251},[230,1096,1098],{"class":1097},"sBMFI"," string",[230,1100,1101],{"class":247},"[]",[230,1103,1104],{"class":251},";",[230,1106,1107],{"class":258}," rows",[230,1109,262],{"class":251},[230,1111,1112],{"class":1097}," unknown",[230,1114,1115],{"class":247},"[][] ",[230,1117,300],{"class":251},[230,1119,1101],{"class":247},[230,1121,897],{"class":251},[230,1123,1124],{"class":247},"([])\n",[230,1126,1127,1129,1132,1134,1136,1138,1141,1143],{"class":232,"line":291},[230,1128,708],{"class":455},[230,1130,1131],{"class":247}," error ",[230,1133,693],{"class":251},[230,1135,716],{"class":243},[230,1137,681],{"class":251},[230,1139,1140],{"class":1097},"string",[230,1142,897],{"class":251},[230,1144,762],{"class":247},[230,1146,1147],{"class":232,"line":297},[230,1148,375],{"emptyLinePlaceholder":374},[230,1150,1151,1153,1155,1158,1160],{"class":232,"line":409},[230,1152,732],{"class":455},[230,1154,735],{"class":455},[230,1156,1157],{"class":243}," run",[230,1159,741],{"class":251},[230,1161,265],{"class":251},[230,1163,1164,1167,1169,1171,1173],{"class":232,"line":429},[230,1165,1166],{"class":247},"  error",[230,1168,483],{"class":251},[230,1170,797],{"class":247},[230,1172,753],{"class":251},[230,1174,1175],{"class":251}," undefined\n",[230,1177,1178,1181],{"class":232,"line":447},[230,1179,1180],{"class":236},"  try",[230,1182,265],{"class":251},[230,1184,1185,1188,1190,1192,1194,1196],{"class":232,"line":474},[230,1186,1187],{"class":455},"    const",[230,1189,480],{"class":247},[230,1191,753],{"class":251},[230,1193,756],{"class":236},[230,1195,759],{"class":243},[230,1197,762],{"class":258},[230,1199,1200,1202,1205,1207,1209,1211,1213,1215,1217,1220,1222,1224,1226,1228,1231,1233,1235,1238,1240,1242],{"class":232,"line":500},[230,1201,1187],{"class":455},[230,1203,1204],{"class":247}," output",[230,1206,753],{"class":251},[230,1208,756],{"class":236},[230,1210,480],{"class":247},[230,1212,483],{"class":251},[230,1214,486],{"class":243},[230,1216,248],{"class":258},[230,1218,1219],{"class":247},"sql",[230,1221,483],{"class":251},[230,1223,797],{"class":247},[230,1225,786],{"class":251},[230,1227,276],{"class":251},[230,1229,1230],{"class":258}," rowMode",[230,1232,262],{"class":251},[230,1234,342],{"class":251},[230,1236,1237],{"class":345},"array",[230,1239,403],{"class":251},[230,1241,336],{"class":251},[230,1243,303],{"class":258},[230,1245,1246,1249,1251,1253,1255,1257,1259,1262,1264,1266,1269,1271,1273,1275],{"class":232,"line":522},[230,1247,1248],{"class":247},"    results",[230,1250,483],{"class":251},[230,1252,797],{"class":247},[230,1254,753],{"class":251},[230,1256,1204],{"class":247},[230,1258,483],{"class":251},[230,1260,1261],{"class":243},"map",[230,1263,248],{"class":258},[230,1265,248],{"class":251},[230,1267,1268],{"class":462},"result",[230,1270,466],{"class":251},[230,1272,469],{"class":455},[230,1274,459],{"class":258},[230,1276,252],{"class":251},[230,1278,1279,1282,1284,1287,1289,1292,1294,1296,1298,1300,1303,1305,1307,1310,1312,1315,1317],{"class":232,"line":527},[230,1280,1281],{"class":258},"      fields",[230,1283,262],{"class":251},[230,1285,1286],{"class":247}," result",[230,1288,483],{"class":251},[230,1290,1291],{"class":247},"fields",[230,1293,483],{"class":251},[230,1295,1261],{"class":243},[230,1297,248],{"class":258},[230,1299,248],{"class":251},[230,1301,1302],{"class":462},"field",[230,1304,466],{"class":251},[230,1306,469],{"class":455},[230,1308,1309],{"class":247}," field",[230,1311,483],{"class":251},[230,1313,1314],{"class":247},"name",[230,1316,466],{"class":258},[230,1318,406],{"class":251},[230,1320,1321,1324,1326,1328,1330,1333,1336,1338,1341],{"class":232,"line":866},[230,1322,1323],{"class":258},"      rows",[230,1325,262],{"class":251},[230,1327,1286],{"class":247},[230,1329,483],{"class":251},[230,1331,1332],{"class":247},"rows",[230,1334,1335],{"class":236}," as",[230,1337,1112],{"class":1097},[230,1339,1340],{"class":258},"[][]",[230,1342,406],{"class":251},[230,1344,1345,1348],{"class":232,"line":889},[230,1346,1347],{"class":251},"    }",[230,1349,1350],{"class":258},"))\n",[230,1352,1353,1356,1359,1361,1364,1367],{"class":232,"line":909},[230,1354,1355],{"class":251},"  }",[230,1357,1358],{"class":236}," catch",[230,1360,459],{"class":258},[230,1362,1363],{"class":247},"cause",[230,1365,1366],{"class":258},") ",[230,1368,252],{"class":251},[230,1370,1371,1374,1376,1378,1380,1383,1386,1389,1392,1394,1396,1399,1402,1405,1407,1409],{"class":232,"line":919},[230,1372,1373],{"class":247},"    error",[230,1375,483],{"class":251},[230,1377,797],{"class":247},[230,1379,753],{"class":251},[230,1381,1382],{"class":247}," cause",[230,1384,1385],{"class":251}," instanceof",[230,1387,1388],{"class":1097}," Error",[230,1390,1391],{"class":251}," ?",[230,1393,1382],{"class":247},[230,1395,483],{"class":251},[230,1397,1398],{"class":247},"message",[230,1400,1401],{"class":251}," :",[230,1403,1404],{"class":243}," String",[230,1406,248],{"class":258},[230,1408,1363],{"class":247},[230,1410,303],{"class":258},[230,1412,1414],{"class":232,"line":1413},17,[230,1415,1416],{"class":251},"  }\n",[230,1418,1420],{"class":232,"line":1419},18,[230,1421,819],{"class":251},[230,1423,1425,1427,1429],{"class":232,"line":1424},19,[230,1426,824],{"class":251},[230,1428,684],{"class":258},[230,1430,703],{"class":251},[215,1432,1433,1435,1436,1438],{},[227,1434,486],{}," runs several statements and returns one result each; ",[227,1437,774],{}," runs one statement with parameters.",[305,1440,1442],{"id":1441},"disabling-the-client-side","Disabling the client side",[215,1444,1445,1446,1449,1450,1453],{},"With ",[227,1447,1448],{},"enabled: false"," (the default), nothing of PGlite reaches the client bundle. ",[227,1451,1452],{},"#pglite\u002Fclient"," still resolves, to a stub whose functions fail with a pointer.",[1455,1456,1457],"style",{},"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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":225,"searchDepth":233,"depth":255,"links":1459},[1460,1461,1462,1463],{"id":307,"depth":255,"text":308},{"id":644,"depth":255,"text":645},{"id":1009,"depth":255,"text":1010},{"id":1441,"depth":255,"text":1442},"PGlite in the browser, in a Web Worker shared between tabs.","md",null,{},{"title":28,"icon":52},{"title":210,"description":1464},"rfzm6LU5cCBIz1jpTjTFvyEluAO-UUdvUxWb6n5hf40",[1472,1474],{"title":41,"path":42,"stem":43,"description":1473,"icon":44,"children":-1},"Explicit imports, the provider behind usePGlite() and how the instance lives.",{"title":54,"path":55,"stem":56,"description":1475,"icon":57,"children":-1},"Components that follow the data, with useLiveQuery and useLiveIncrementalQuery.",1791474259253]