[{"data":1,"prerenderedAt":1452},["ShallowReactive",2],{"navigation_docs":3,"-guides-app-bridge":396,"-guides-app-bridge-surround":1447},[4,35,61,83],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":34},"Getting Started","lucide:rocket","\u002Fgetting-started","1.getting-started",[10,14,18,22,26,30],{"title":11,"path":12,"stem":13},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F2.introduction",{"title":15,"path":16,"stem":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F3.installation",{"title":19,"path":20,"stem":21},"Project Structure","\u002Fgetting-started\u002Fproject-structure","1.getting-started\u002F4.project-structure",{"title":23,"path":24,"stem":25},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F5.configuration",{"title":27,"path":28,"stem":29},"Requirements","\u002Fgetting-started\u002Frequirements","1.getting-started\u002F6.requirements",{"title":31,"path":32,"stem":33},"Troubleshooting","\u002Fgetting-started\u002Ftroubleshooting","1.getting-started\u002F7.troubleshooting",false,{"title":36,"icon":37,"path":38,"stem":39,"children":40,"page":34},"Guides","lucide:book-search","\u002Fguides","2.guides",[41,45,49,53,57],{"title":42,"path":43,"stem":44},"Authentication","\u002Fguides\u002Fauthentication","2.guides\u002F1.authentication",{"title":46,"path":47,"stem":48},"Webhooks","\u002Fguides\u002Fwebhooks","2.guides\u002F2.webhooks",{"title":50,"path":51,"stem":52},"App Bridge","\u002Fguides\u002Fapp-bridge","2.guides\u002F3.app-bridge",{"title":54,"path":55,"stem":56},"Polaris Components","\u002Fguides\u002Fpolaris-components","2.guides\u002F4.polaris-components",{"title":58,"path":59,"stem":60},"GraphQL Codegen","\u002Fguides\u002Fgraphql-codegen","2.guides\u002F5.graphql-codegen",{"title":62,"icon":63,"path":64,"stem":65,"children":66,"page":34},"API Reference","lucide:square-dashed-bottom-code","\u002Fapi","3.api",[67,71,75,79],{"title":68,"path":69,"stem":70},"Server Utilities","\u002Fapi\u002Fserver-utilities","3.api\u002F1.server-utilities",{"title":72,"path":73,"stem":74},"Composables","\u002Fapi\u002Fcomposables","3.api\u002F2.composables",{"title":76,"path":77,"stem":78},"Middleware","\u002Fapi\u002Fmiddleware","3.api\u002F4.middleware",{"title":80,"path":81,"stem":82},"Types","\u002Fapi\u002Ftypes","3.api\u002F5.types",{"title":84,"icon":85,"path":86,"stem":87,"children":88},"Polaris Web Components","ic:baseline-shopify","\u002Fpolaris-wc","4.polaris-wc",[89,91,124,145,166,243,264,289,318,371,384],{"title":84,"path":86,"stem":90},"4.polaris-wc\u002Findex",{"title":92,"path":93,"stem":94,"children":95,"page":34},"Layout","\u002Fpolaris-wc\u002Flayout","4.polaris-wc\u002F1.layout",[96,100,104,108,112,116,120],{"title":97,"path":98,"stem":99},"Page","\u002Fpolaris-wc\u002Flayout\u002Fpage","4.polaris-wc\u002F1.layout\u002F1.page",{"title":101,"path":102,"stem":103},"Box","\u002Fpolaris-wc\u002Flayout\u002Fbox","4.polaris-wc\u002F1.layout\u002F2.box",{"title":105,"path":106,"stem":107},"Stack","\u002Fpolaris-wc\u002Flayout\u002Fstack","4.polaris-wc\u002F1.layout\u002F3.stack",{"title":109,"path":110,"stem":111},"Grid","\u002Fpolaris-wc\u002Flayout\u002Fgrid","4.polaris-wc\u002F1.layout\u002F4.grid",{"title":113,"path":114,"stem":115},"GridItem","\u002Fpolaris-wc\u002Flayout\u002Fgrid-item","4.polaris-wc\u002F1.layout\u002F5.grid-item",{"title":117,"path":118,"stem":119},"Section","\u002Fpolaris-wc\u002Flayout\u002Fsection","4.polaris-wc\u002F1.layout\u002F6.section",{"title":121,"path":122,"stem":123},"Divider","\u002Fpolaris-wc\u002Flayout\u002Fdivider","4.polaris-wc\u002F1.layout\u002F7.divider",{"title":125,"path":126,"stem":127,"children":128,"page":34},"App Bridge Ui","\u002Fpolaris-wc\u002Fapp-bridge-ui","4.polaris-wc\u002F10.app-bridge-ui",[129,133,137,141],{"title":130,"path":131,"stem":132},"UiModal","\u002Fpolaris-wc\u002Fapp-bridge-ui\u002Fui-modal","4.polaris-wc\u002F10.app-bridge-ui\u002F1.ui-modal",{"title":134,"path":135,"stem":136},"UiTitleBar","\u002Fpolaris-wc\u002Fapp-bridge-ui\u002Fui-title-bar","4.polaris-wc\u002F10.app-bridge-ui\u002F2.ui-title-bar",{"title":138,"path":139,"stem":140},"UiSaveBar","\u002Fpolaris-wc\u002Fapp-bridge-ui\u002Fui-save-bar","4.polaris-wc\u002F10.app-bridge-ui\u002F3.ui-save-bar",{"title":142,"path":143,"stem":144},"UiNavMenu","\u002Fpolaris-wc\u002Fapp-bridge-ui\u002Fui-nav-menu","4.polaris-wc\u002F10.app-bridge-ui\u002F4.ui-nav-menu",{"title":146,"path":147,"stem":148,"children":149,"page":34},"Actions","\u002Fpolaris-wc\u002Factions","4.polaris-wc\u002F2.actions",[150,154,158,162],{"title":151,"path":152,"stem":153},"Button","\u002Fpolaris-wc\u002Factions\u002Fbutton","4.polaris-wc\u002F2.actions\u002F1.button",{"title":155,"path":156,"stem":157},"ButtonGroup","\u002Fpolaris-wc\u002Factions\u002Fbutton-group","4.polaris-wc\u002F2.actions\u002F2.button-group",{"title":159,"path":160,"stem":161},"Clickable","\u002Fpolaris-wc\u002Factions\u002Fclickable","4.polaris-wc\u002F2.actions\u002F3.clickable",{"title":163,"path":164,"stem":165},"Link","\u002Fpolaris-wc\u002Factions\u002Flink","4.polaris-wc\u002F2.actions\u002F4.link",{"title":167,"path":168,"stem":169,"children":170,"page":34},"Forms","\u002Fpolaris-wc\u002Fforms","4.polaris-wc\u002F3.forms",[171,175,179,183,187,191,195,199,203,207,211,215,219,223,227,231,235,239],{"title":172,"path":173,"stem":174},"TextField","\u002Fpolaris-wc\u002Fforms\u002Ftext-field","4.polaris-wc\u002F3.forms\u002F01.text-field",{"title":176,"path":177,"stem":178},"NumberField","\u002Fpolaris-wc\u002Fforms\u002Fnumber-field","4.polaris-wc\u002F3.forms\u002F02.number-field",{"title":180,"path":181,"stem":182},"EmailField","\u002Fpolaris-wc\u002Fforms\u002Femail-field","4.polaris-wc\u002F3.forms\u002F03.email-field",{"title":184,"path":185,"stem":186},"PasswordField","\u002Fpolaris-wc\u002Fforms\u002Fpassword-field","4.polaris-wc\u002F3.forms\u002F04.password-field",{"title":188,"path":189,"stem":190},"UrlField","\u002Fpolaris-wc\u002Fforms\u002Furl-field","4.polaris-wc\u002F3.forms\u002F05.url-field",{"title":192,"path":193,"stem":194},"MoneyField","\u002Fpolaris-wc\u002Fforms\u002Fmoney-field","4.polaris-wc\u002F3.forms\u002F06.money-field",{"title":196,"path":197,"stem":198},"ColorField","\u002Fpolaris-wc\u002Fforms\u002Fcolor-field","4.polaris-wc\u002F3.forms\u002F07.color-field",{"title":200,"path":201,"stem":202},"DateField","\u002Fpolaris-wc\u002Fforms\u002Fdate-field","4.polaris-wc\u002F3.forms\u002F08.date-field",{"title":204,"path":205,"stem":206},"TextArea","\u002Fpolaris-wc\u002Fforms\u002Ftext-area","4.polaris-wc\u002F3.forms\u002F09.text-area",{"title":208,"path":209,"stem":210},"Select","\u002Fpolaris-wc\u002Fforms\u002Fselect","4.polaris-wc\u002F3.forms\u002F10.select",{"title":212,"path":213,"stem":214},"Checkbox","\u002Fpolaris-wc\u002Fforms\u002Fcheckbox","4.polaris-wc\u002F3.forms\u002F11.checkbox",{"title":216,"path":217,"stem":218},"Switch","\u002Fpolaris-wc\u002Fforms\u002Fswitch","4.polaris-wc\u002F3.forms\u002F12.switch",{"title":220,"path":221,"stem":222},"ChoiceList","\u002Fpolaris-wc\u002Fforms\u002Fchoice-list","4.polaris-wc\u002F3.forms\u002F13.choice-list",{"title":224,"path":225,"stem":226},"Choice","\u002Fpolaris-wc\u002Fforms\u002Fchoice","4.polaris-wc\u002F3.forms\u002F14.choice",{"title":228,"path":229,"stem":230},"SearchField","\u002Fpolaris-wc\u002Fforms\u002Fsearch-field","4.polaris-wc\u002F3.forms\u002F15.search-field",{"title":232,"path":233,"stem":234},"DropZone","\u002Fpolaris-wc\u002Fforms\u002Fdrop-zone","4.polaris-wc\u002F3.forms\u002F16.drop-zone",{"title":236,"path":237,"stem":238},"ColorPicker","\u002Fpolaris-wc\u002Fforms\u002Fcolor-picker","4.polaris-wc\u002F3.forms\u002F17.color-picker",{"title":240,"path":241,"stem":242},"DatePicker","\u002Fpolaris-wc\u002Fforms\u002Fdate-picker","4.polaris-wc\u002F3.forms\u002F18.date-picker",{"title":244,"path":245,"stem":246,"children":247,"page":34},"Feedback","\u002Fpolaris-wc\u002Ffeedback","4.polaris-wc\u002F4.feedback",[248,252,256,260],{"title":249,"path":250,"stem":251},"Banner","\u002Fpolaris-wc\u002Ffeedback\u002Fbanner","4.polaris-wc\u002F4.feedback\u002F1.banner",{"title":253,"path":254,"stem":255},"Badge","\u002Fpolaris-wc\u002Ffeedback\u002Fbadge","4.polaris-wc\u002F4.feedback\u002F2.badge",{"title":257,"path":258,"stem":259},"Spinner","\u002Fpolaris-wc\u002Ffeedback\u002Fspinner","4.polaris-wc\u002F4.feedback\u002F3.spinner",{"title":261,"path":262,"stem":263},"Tooltip","\u002Fpolaris-wc\u002Ffeedback\u002Ftooltip","4.polaris-wc\u002F4.feedback\u002F4.tooltip",{"title":265,"path":266,"stem":267,"children":268,"page":34},"Navigation","\u002Fpolaris-wc\u002Fnavigation","4.polaris-wc\u002F5.navigation",[269,273,277,281,285],{"title":270,"path":271,"stem":272},"AppNav","\u002Fpolaris-wc\u002Fnavigation\u002Fapp-nav","4.polaris-wc\u002F5.navigation\u002F1.app-nav",{"title":274,"path":275,"stem":276},"Menu","\u002Fpolaris-wc\u002Fnavigation\u002Fmenu","4.polaris-wc\u002F5.navigation\u002F2.menu",{"title":278,"path":279,"stem":280},"Option","\u002Fpolaris-wc\u002Fnavigation\u002Foption","4.polaris-wc\u002F5.navigation\u002F3.option",{"title":282,"path":283,"stem":284},"OptionGroup","\u002Fpolaris-wc\u002Fnavigation\u002Foption-group","4.polaris-wc\u002F5.navigation\u002F4.option-group",{"title":286,"path":287,"stem":288},"Popover","\u002Fpolaris-wc\u002Fnavigation\u002Fpopover","4.polaris-wc\u002F5.navigation\u002F5.popover",{"title":290,"path":291,"stem":292,"children":293,"page":34},"Data","\u002Fpolaris-wc\u002Fdata","4.polaris-wc\u002F6.data",[294,298,302,306,310,314],{"title":295,"path":296,"stem":297},"Table","\u002Fpolaris-wc\u002Fdata\u002Ftable","4.polaris-wc\u002F6.data\u002F1.table",{"title":299,"path":300,"stem":301},"TableHeader","\u002Fpolaris-wc\u002Fdata\u002Ftable-header","4.polaris-wc\u002F6.data\u002F2.table-header",{"title":303,"path":304,"stem":305},"TableHeaderRow","\u002Fpolaris-wc\u002Fdata\u002Ftable-header-row","4.polaris-wc\u002F6.data\u002F3.table-header-row",{"title":307,"path":308,"stem":309},"TableBody","\u002Fpolaris-wc\u002Fdata\u002Ftable-body","4.polaris-wc\u002F6.data\u002F4.table-body",{"title":311,"path":312,"stem":313},"TableRow","\u002Fpolaris-wc\u002Fdata\u002Ftable-row","4.polaris-wc\u002F6.data\u002F5.table-row",{"title":315,"path":316,"stem":317},"TableCell","\u002Fpolaris-wc\u002Fdata\u002Ftable-cell","4.polaris-wc\u002F6.data\u002F6.table-cell",{"title":319,"path":320,"stem":321,"children":322,"page":34},"Content","\u002Fpolaris-wc\u002Fcontent","4.polaris-wc\u002F7.content",[323,327,331,335,339,343,347,351,355,359,363,367],{"title":324,"path":325,"stem":326},"Text","\u002Fpolaris-wc\u002Fcontent\u002Ftext","4.polaris-wc\u002F7.content\u002F01.text",{"title":328,"path":329,"stem":330},"Heading","\u002Fpolaris-wc\u002Fcontent\u002Fheading","4.polaris-wc\u002F7.content\u002F02.heading",{"title":332,"path":333,"stem":334},"Paragraph","\u002Fpolaris-wc\u002Fcontent\u002Fparagraph","4.polaris-wc\u002F7.content\u002F03.paragraph",{"title":336,"path":337,"stem":338},"Icon","\u002Fpolaris-wc\u002Fcontent\u002Ficon","4.polaris-wc\u002F7.content\u002F04.icon",{"title":340,"path":341,"stem":342},"Image","\u002Fpolaris-wc\u002Fcontent\u002Fimage","4.polaris-wc\u002F7.content\u002F05.image",{"title":344,"path":345,"stem":346},"Thumbnail","\u002Fpolaris-wc\u002Fcontent\u002Fthumbnail","4.polaris-wc\u002F7.content\u002F06.thumbnail",{"title":348,"path":349,"stem":350},"Avatar","\u002Fpolaris-wc\u002Fcontent\u002Favatar","4.polaris-wc\u002F7.content\u002F07.avatar",{"title":352,"path":353,"stem":354},"Chip","\u002Fpolaris-wc\u002Fcontent\u002Fchip","4.polaris-wc\u002F7.content\u002F08.chip",{"title":356,"path":357,"stem":358},"ClickableChip","\u002Fpolaris-wc\u002Fcontent\u002Fclickable-chip","4.polaris-wc\u002F7.content\u002F09.clickable-chip",{"title":360,"path":361,"stem":362},"ListItem","\u002Fpolaris-wc\u002Fcontent\u002Flist-item","4.polaris-wc\u002F7.content\u002F10.list-item",{"title":364,"path":365,"stem":366},"OrderedList","\u002Fpolaris-wc\u002Fcontent\u002Fordered-list","4.polaris-wc\u002F7.content\u002F11.ordered-list",{"title":368,"path":369,"stem":370},"UnorderedList","\u002Fpolaris-wc\u002Fcontent\u002Funordered-list","4.polaris-wc\u002F7.content\u002F12.unordered-list",{"title":372,"path":373,"stem":374,"children":375,"page":34},"Overlays","\u002Fpolaris-wc\u002Foverlays","4.polaris-wc\u002F8.overlays",[376,380],{"title":377,"path":378,"stem":379},"Modal","\u002Fpolaris-wc\u002Foverlays\u002Fmodal","4.polaris-wc\u002F8.overlays\u002F1.modal",{"title":381,"path":382,"stem":383},"QueryContainer","\u002Fpolaris-wc\u002Foverlays\u002Fquery-container","4.polaris-wc\u002F8.overlays\u002F2.query-container",{"title":385,"path":386,"stem":387,"children":388,"page":34},"App","\u002Fpolaris-wc\u002Fapp","4.polaris-wc\u002F9.app",[389,392],{"title":385,"path":390,"stem":391},"\u002Fpolaris-wc\u002Fapp\u002Fapp","4.polaris-wc\u002F9.app\u002F1.app",{"title":393,"path":394,"stem":395},"LoadingIndicator","\u002Fpolaris-wc\u002Fapp\u002Floading-indicator","4.polaris-wc\u002F9.app\u002F2.loading-indicator",{"id":397,"title":50,"body":398,"description":1439,"extension":1440,"links":1441,"meta":1442,"navigation":502,"path":51,"seo":1443,"stem":52,"__hash__":1446},"docs\u002F2.guides\u002F3.app-bridge.md",{"type":399,"value":400,"toc":1426},"minimark",[401,406,415,428,434,441,544,549,554,715,721,727,750,772,776,886,890,1054,1058,1195,1199,1354,1358,1372,1415,1422],[402,403,405],"h2",{"id":404},"overview","Overview",[407,408,409,410,414],"p",{},"The module uses Shopify's ",[411,412,413],"strong",{},"CDN-based App Bridge"," (not the deprecated npm package). The CDN script and API key meta tag are automatically injected via SSR head — no manual setup required.",[416,417,418,419,422,423,427],"warning",{},"Do ",[411,420,421],{},"not"," install the ",[424,425,426],"code",{},"@shopify\u002Fapp-bridge"," npm package — it is deprecated. The module uses the CDN approach exclusively.",[402,429,431],{"id":430},"useappbridge",[424,432,433],{},"useAppBridge()",[407,435,436,437,440],{},"Access the App Bridge instance (typed as ",[424,438,439],{},"ShopifyGlobal",") in your Vue components:",[442,443,448],"pre",{"className":444,"code":445,"language":446,"meta":447,"style":447},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\n\u002F\u002F Access the App Bridge instance\nconst shopify = useAppBridge()\n\n\u002F\u002F Get the current shop\nconst shop = shopify.config.shop\n\u003C\u002Fscript>\n","vue","",[424,449,450,470,477,497,504,510,534],{"__ignoreMap":447},[451,452,455,459,463,467],"span",{"class":453,"line":454},"line",1,[451,456,458],{"class":457},"sMK4o","\u003C",[451,460,462],{"class":461},"swJcz","script",[451,464,466],{"class":465},"spNyl"," setup",[451,468,469],{"class":457},">\n",[451,471,473],{"class":453,"line":472},2,[451,474,476],{"class":475},"sHwdD","\u002F\u002F Access the App Bridge instance\n",[451,478,480,483,487,490,494],{"class":453,"line":479},3,[451,481,482],{"class":465},"const",[451,484,486],{"class":485},"sTEyZ"," shopify ",[451,488,489],{"class":457},"=",[451,491,493],{"class":492},"s2Zo4"," useAppBridge",[451,495,496],{"class":485},"()\n",[451,498,500],{"class":453,"line":499},4,[451,501,503],{"emptyLinePlaceholder":502},true,"\n",[451,505,507],{"class":453,"line":506},5,[451,508,509],{"class":475},"\u002F\u002F Get the current shop\n",[451,511,513,515,518,520,523,526,529,531],{"class":453,"line":512},6,[451,514,482],{"class":465},[451,516,517],{"class":485}," shop ",[451,519,489],{"class":457},[451,521,522],{"class":485}," shopify",[451,524,525],{"class":457},".",[451,527,528],{"class":485},"config",[451,530,525],{"class":457},[451,532,533],{"class":485},"shop\n",[451,535,537,540,542],{"class":453,"line":536},7,[451,538,539],{"class":457},"\u003C\u002F",[451,541,462],{"class":461},[451,543,469],{"class":457},[407,545,546,548],{},[424,547,433],{}," is safe to call anywhere — it returns a lazy proxy that only throws when a property is accessed in an unavailable context (e.g., server-side or outside the Shopify admin iframe).",[550,551,553],"h3",{"id":552},"common-app-bridge-apis","Common App Bridge APIs",[442,555,557],{"className":444,"code":556,"language":446,"meta":447,"style":447},"\u003Cscript setup>\nconst shopify = useAppBridge()\n\n\u002F\u002F Show a toast notification\nshopify.toast.show('Product saved!')\n\n\u002F\u002F Open a resource picker\nconst selection = await shopify.resourcePicker({ type: 'product' })\n\n\u002F\u002F Get a session token\nconst token = await shopify.idToken()\n\u003C\u002Fscript>\n",[424,558,559,569,581,585,590,620,624,629,674,679,685,706],{"__ignoreMap":447},[451,560,561,563,565,567],{"class":453,"line":454},[451,562,458],{"class":457},[451,564,462],{"class":461},[451,566,466],{"class":465},[451,568,469],{"class":457},[451,570,571,573,575,577,579],{"class":453,"line":472},[451,572,482],{"class":465},[451,574,486],{"class":485},[451,576,489],{"class":457},[451,578,493],{"class":492},[451,580,496],{"class":485},[451,582,583],{"class":453,"line":479},[451,584,503],{"emptyLinePlaceholder":502},[451,586,587],{"class":453,"line":499},[451,588,589],{"class":475},"\u002F\u002F Show a toast notification\n",[451,591,592,595,597,600,602,605,608,611,615,617],{"class":453,"line":506},[451,593,594],{"class":485},"shopify",[451,596,525],{"class":457},[451,598,599],{"class":485},"toast",[451,601,525],{"class":457},[451,603,604],{"class":492},"show",[451,606,607],{"class":485},"(",[451,609,610],{"class":457},"'",[451,612,614],{"class":613},"sfazB","Product saved!",[451,616,610],{"class":457},[451,618,619],{"class":485},")\n",[451,621,622],{"class":453,"line":512},[451,623,503],{"emptyLinePlaceholder":502},[451,625,626],{"class":453,"line":536},[451,627,628],{"class":475},"\u002F\u002F Open a resource picker\n",[451,630,632,634,637,639,643,645,647,650,652,655,658,661,664,667,669,672],{"class":453,"line":631},8,[451,633,482],{"class":465},[451,635,636],{"class":485}," selection ",[451,638,489],{"class":457},[451,640,642],{"class":641},"s7zQu"," await",[451,644,522],{"class":485},[451,646,525],{"class":457},[451,648,649],{"class":492},"resourcePicker",[451,651,607],{"class":485},[451,653,654],{"class":457},"{",[451,656,657],{"class":461}," type",[451,659,660],{"class":457},":",[451,662,663],{"class":457}," '",[451,665,666],{"class":613},"product",[451,668,610],{"class":457},[451,670,671],{"class":457}," }",[451,673,619],{"class":485},[451,675,677],{"class":453,"line":676},9,[451,678,503],{"emptyLinePlaceholder":502},[451,680,682],{"class":453,"line":681},10,[451,683,684],{"class":475},"\u002F\u002F Get a session token\n",[451,686,688,690,693,695,697,699,701,704],{"class":453,"line":687},11,[451,689,482],{"class":465},[451,691,692],{"class":485}," token ",[451,694,489],{"class":457},[451,696,642],{"class":641},[451,698,522],{"class":485},[451,700,525],{"class":457},[451,702,703],{"class":492},"idToken",[451,705,496],{"class":485},[451,707,709,711,713],{"class":453,"line":708},12,[451,710,539],{"class":457},[451,712,462],{"class":461},[451,714,469],{"class":457},[402,716,718],{"id":717},"useshopifyfetch",[424,719,720],{},"useShopifyFetch()",[407,722,723,724,726],{},"Use ",[424,725,720],{}," for API calls that automatically include the Shopify session token:",[728,729,730,741],"ul",{},[731,732,733,736,737,740],"li",{},[411,734,735],{},"Client",": Fetches a session token via App Bridge and sets the ",[424,738,739],{},"Authorization"," header",[731,742,743,746,747,749],{},[411,744,745],{},"Server",": Forwards the ",[424,748,739],{}," header from the incoming request (when one is already present)",[416,751,752,753,756,757,759,760,763,764,767,768,771],{},"Session tokens are only available on the ",[411,754,755],{},"client"," via App Bridge. When using ",[424,758,720],{}," inside ",[424,761,762],{},"useAsyncData",", you ",[411,765,766],{},"must"," pass ",[424,769,770],{},"{ server: false }"," so the fetch runs in the browser where App Bridge can provide a token.",[550,773,775],{"id":774},"basic-usage","Basic usage",[442,777,779],{"className":444,"code":778,"language":446,"meta":447,"style":447},"\u003Cscript setup>\nconst { data: shop } = await useAsyncData(\n  'shop',\n  () => useShopifyFetch('\u002Fapi\u002Fshop'),\n  { server: false }\n)\n\u003C\u002Fscript>\n",[424,780,781,791,819,832,857,874,878],{"__ignoreMap":447},[451,782,783,785,787,789],{"class":453,"line":454},[451,784,458],{"class":457},[451,786,462],{"class":461},[451,788,466],{"class":465},[451,790,469],{"class":457},[451,792,793,795,798,801,803,805,808,811,813,816],{"class":453,"line":472},[451,794,482],{"class":465},[451,796,797],{"class":457}," {",[451,799,800],{"class":461}," data",[451,802,660],{"class":457},[451,804,517],{"class":485},[451,806,807],{"class":457},"}",[451,809,810],{"class":457}," =",[451,812,642],{"class":641},[451,814,815],{"class":492}," useAsyncData",[451,817,818],{"class":485},"(\n",[451,820,821,824,827,829],{"class":453,"line":479},[451,822,823],{"class":457},"  '",[451,825,826],{"class":613},"shop",[451,828,610],{"class":457},[451,830,831],{"class":457},",\n",[451,833,834,837,840,843,845,847,850,852,855],{"class":453,"line":499},[451,835,836],{"class":457},"  ()",[451,838,839],{"class":465}," =>",[451,841,842],{"class":492}," useShopifyFetch",[451,844,607],{"class":485},[451,846,610],{"class":457},[451,848,849],{"class":613},"\u002Fapi\u002Fshop",[451,851,610],{"class":457},[451,853,854],{"class":485},")",[451,856,831],{"class":457},[451,858,859,862,865,867,871],{"class":453,"line":506},[451,860,861],{"class":457},"  {",[451,863,864],{"class":461}," server",[451,866,660],{"class":457},[451,868,870],{"class":869},"sfNiH"," false",[451,872,873],{"class":457}," }\n",[451,875,876],{"class":453,"line":512},[451,877,619],{"class":485},[451,879,880,882,884],{"class":453,"line":536},[451,881,539],{"class":457},[451,883,462],{"class":461},[451,885,469],{"class":457},[550,887,889],{"id":888},"with-typescript-generics","With TypeScript generics",[442,891,893],{"className":444,"code":892,"language":446,"meta":447,"style":447},"\u003Cscript setup lang=\"ts\">\ninterface ShopData {\n  shop: { name: string; currencyCode: string }\n}\n\nconst { data } = await useAsyncData(\n  'shop',\n  () => useShopifyFetch\u003CShopData>('\u002Fapi\u002Fshop'),\n  { server: false }\n)\n\u002F\u002F data.value.shop.name is fully typed\n\u003C\u002Fscript>\n",[424,894,895,918,930,959,964,968,987,997,1025,1037,1041,1046],{"__ignoreMap":447},[451,896,897,899,901,903,906,908,911,914,916],{"class":453,"line":454},[451,898,458],{"class":457},[451,900,462],{"class":461},[451,902,466],{"class":465},[451,904,905],{"class":465}," lang",[451,907,489],{"class":457},[451,909,910],{"class":457},"\"",[451,912,913],{"class":613},"ts",[451,915,910],{"class":457},[451,917,469],{"class":457},[451,919,920,923,927],{"class":453,"line":472},[451,921,922],{"class":465},"interface",[451,924,926],{"class":925},"sBMFI"," ShopData",[451,928,929],{"class":457}," {\n",[451,931,932,935,937,939,942,944,947,950,953,955,957],{"class":453,"line":479},[451,933,934],{"class":461},"  shop",[451,936,660],{"class":457},[451,938,797],{"class":457},[451,940,941],{"class":461}," name",[451,943,660],{"class":457},[451,945,946],{"class":925}," string",[451,948,949],{"class":457},";",[451,951,952],{"class":461}," currencyCode",[451,954,660],{"class":457},[451,956,946],{"class":925},[451,958,873],{"class":457},[451,960,961],{"class":453,"line":499},[451,962,963],{"class":457},"}\n",[451,965,966],{"class":453,"line":506},[451,967,503],{"emptyLinePlaceholder":502},[451,969,970,972,974,977,979,981,983,985],{"class":453,"line":512},[451,971,482],{"class":465},[451,973,797],{"class":457},[451,975,976],{"class":485}," data ",[451,978,807],{"class":457},[451,980,810],{"class":457},[451,982,642],{"class":641},[451,984,815],{"class":492},[451,986,818],{"class":485},[451,988,989,991,993,995],{"class":453,"line":536},[451,990,823],{"class":457},[451,992,826],{"class":613},[451,994,610],{"class":457},[451,996,831],{"class":457},[451,998,999,1001,1003,1005,1007,1010,1013,1015,1017,1019,1021,1023],{"class":453,"line":631},[451,1000,836],{"class":457},[451,1002,839],{"class":465},[451,1004,842],{"class":492},[451,1006,458],{"class":457},[451,1008,1009],{"class":925},"ShopData",[451,1011,1012],{"class":457},">",[451,1014,607],{"class":485},[451,1016,610],{"class":457},[451,1018,849],{"class":613},[451,1020,610],{"class":457},[451,1022,854],{"class":485},[451,1024,831],{"class":457},[451,1026,1027,1029,1031,1033,1035],{"class":453,"line":676},[451,1028,861],{"class":457},[451,1030,864],{"class":461},[451,1032,660],{"class":457},[451,1034,870],{"class":869},[451,1036,873],{"class":457},[451,1038,1039],{"class":453,"line":681},[451,1040,619],{"class":485},[451,1042,1043],{"class":453,"line":687},[451,1044,1045],{"class":475},"\u002F\u002F data.value.shop.name is fully typed\n",[451,1047,1048,1050,1052],{"class":453,"line":708},[451,1049,539],{"class":457},[451,1051,462],{"class":461},[451,1053,469],{"class":457},[550,1055,1057],{"id":1056},"with-query-parameters","With query parameters",[442,1059,1061],{"className":444,"code":1060,"language":446,"meta":447,"style":447},"\u003Cscript setup>\nconst { data } = await useAsyncData(\n  'products',\n  () =>\n    useShopifyFetch('\u002Fapi\u002Fproducts', {\n      query: { limit: 10, status: 'active' }\n    }),\n  { server: false }\n)\n\u003C\u002Fscript>\n",[424,1062,1063,1073,1091,1102,1109,1128,1162,1171,1183,1187],{"__ignoreMap":447},[451,1064,1065,1067,1069,1071],{"class":453,"line":454},[451,1066,458],{"class":457},[451,1068,462],{"class":461},[451,1070,466],{"class":465},[451,1072,469],{"class":457},[451,1074,1075,1077,1079,1081,1083,1085,1087,1089],{"class":453,"line":472},[451,1076,482],{"class":465},[451,1078,797],{"class":457},[451,1080,976],{"class":485},[451,1082,807],{"class":457},[451,1084,810],{"class":457},[451,1086,642],{"class":641},[451,1088,815],{"class":492},[451,1090,818],{"class":485},[451,1092,1093,1095,1098,1100],{"class":453,"line":479},[451,1094,823],{"class":457},[451,1096,1097],{"class":613},"products",[451,1099,610],{"class":457},[451,1101,831],{"class":457},[451,1103,1104,1106],{"class":453,"line":499},[451,1105,836],{"class":457},[451,1107,1108],{"class":465}," =>\n",[451,1110,1111,1114,1116,1118,1121,1123,1126],{"class":453,"line":506},[451,1112,1113],{"class":492},"    useShopifyFetch",[451,1115,607],{"class":485},[451,1117,610],{"class":457},[451,1119,1120],{"class":613},"\u002Fapi\u002Fproducts",[451,1122,610],{"class":457},[451,1124,1125],{"class":457},",",[451,1127,929],{"class":457},[451,1129,1130,1133,1135,1137,1140,1142,1146,1148,1151,1153,1155,1158,1160],{"class":453,"line":512},[451,1131,1132],{"class":461},"      query",[451,1134,660],{"class":457},[451,1136,797],{"class":457},[451,1138,1139],{"class":461}," limit",[451,1141,660],{"class":457},[451,1143,1145],{"class":1144},"sbssI"," 10",[451,1147,1125],{"class":457},[451,1149,1150],{"class":461}," status",[451,1152,660],{"class":457},[451,1154,663],{"class":457},[451,1156,1157],{"class":613},"active",[451,1159,610],{"class":457},[451,1161,873],{"class":457},[451,1163,1164,1167,1169],{"class":453,"line":536},[451,1165,1166],{"class":457},"    }",[451,1168,854],{"class":485},[451,1170,831],{"class":457},[451,1172,1173,1175,1177,1179,1181],{"class":453,"line":631},[451,1174,861],{"class":457},[451,1176,864],{"class":461},[451,1178,660],{"class":457},[451,1180,870],{"class":869},[451,1182,873],{"class":457},[451,1184,1185],{"class":453,"line":676},[451,1186,619],{"class":485},[451,1188,1189,1191,1193],{"class":453,"line":681},[451,1190,539],{"class":457},[451,1192,462],{"class":461},[451,1194,469],{"class":457},[550,1196,1198],{"id":1197},"with-mutations","With mutations",[442,1200,1202],{"className":444,"code":1201,"language":446,"meta":447,"style":447},"\u003Cscript setup>\nasync function createProduct() {\n  const result = await useShopifyFetch('\u002Fapi\u002Fproducts', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application\u002Fjson' },\n    body: JSON.stringify({ title: 'New Product' })\n  })\n}\n\u003C\u002Fscript>\n",[424,1203,1204,1214,1230,1256,1272,1300,1335,1342,1346],{"__ignoreMap":447},[451,1205,1206,1208,1210,1212],{"class":453,"line":454},[451,1207,458],{"class":457},[451,1209,462],{"class":461},[451,1211,466],{"class":465},[451,1213,469],{"class":457},[451,1215,1216,1219,1222,1225,1228],{"class":453,"line":472},[451,1217,1218],{"class":465},"async",[451,1220,1221],{"class":465}," function",[451,1223,1224],{"class":492}," createProduct",[451,1226,1227],{"class":457},"()",[451,1229,929],{"class":457},[451,1231,1232,1235,1238,1240,1242,1244,1246,1248,1250,1252,1254],{"class":453,"line":479},[451,1233,1234],{"class":465},"  const",[451,1236,1237],{"class":485}," result",[451,1239,810],{"class":457},[451,1241,642],{"class":641},[451,1243,842],{"class":492},[451,1245,607],{"class":461},[451,1247,610],{"class":457},[451,1249,1120],{"class":613},[451,1251,610],{"class":457},[451,1253,1125],{"class":457},[451,1255,929],{"class":457},[451,1257,1258,1261,1263,1265,1268,1270],{"class":453,"line":499},[451,1259,1260],{"class":461},"    method",[451,1262,660],{"class":457},[451,1264,663],{"class":457},[451,1266,1267],{"class":613},"POST",[451,1269,610],{"class":457},[451,1271,831],{"class":457},[451,1273,1274,1277,1279,1281,1283,1286,1288,1290,1292,1295,1297],{"class":453,"line":506},[451,1275,1276],{"class":461},"    headers",[451,1278,660],{"class":457},[451,1280,797],{"class":457},[451,1282,663],{"class":457},[451,1284,1285],{"class":461},"Content-Type",[451,1287,610],{"class":457},[451,1289,660],{"class":457},[451,1291,663],{"class":457},[451,1293,1294],{"class":613},"application\u002Fjson",[451,1296,610],{"class":457},[451,1298,1299],{"class":457}," },\n",[451,1301,1302,1305,1307,1310,1312,1315,1317,1319,1322,1324,1326,1329,1331,1333],{"class":453,"line":512},[451,1303,1304],{"class":461},"    body",[451,1306,660],{"class":457},[451,1308,1309],{"class":485}," JSON",[451,1311,525],{"class":457},[451,1313,1314],{"class":492},"stringify",[451,1316,607],{"class":461},[451,1318,654],{"class":457},[451,1320,1321],{"class":461}," title",[451,1323,660],{"class":457},[451,1325,663],{"class":457},[451,1327,1328],{"class":613},"New Product",[451,1330,610],{"class":457},[451,1332,671],{"class":457},[451,1334,619],{"class":461},[451,1336,1337,1340],{"class":453,"line":536},[451,1338,1339],{"class":457},"  }",[451,1341,619],{"class":461},[451,1343,1344],{"class":453,"line":631},[451,1345,963],{"class":457},[451,1347,1348,1350,1352],{"class":453,"line":676},[451,1349,539],{"class":457},[451,1351,462],{"class":461},[451,1353,469],{"class":457},[402,1355,1357],{"id":1356},"loading-indicator","Loading Indicator",[407,1359,1360,1363,1364,1367,1368,1371],{},[424,1361,1362],{},"\u003CShLoadingIndicator>"," hooks into Nuxt's ",[424,1365,1366],{},"useLoadingIndicator()"," and calls ",[424,1369,1370],{},"shopify.loading()"," to show\u002Fhide the Shopify Admin's native top loading bar during page navigations:",[442,1373,1376],{"className":444,"code":1374,"filename":1375,"language":446,"meta":447,"style":447},"\u003Ctemplate>\n  \u003CShLoadingIndicator \u002F>\n  \u003CNuxtPage \u002F>\n\u003C\u002Ftemplate>\n","app.vue",[424,1377,1378,1387,1398,1407],{"__ignoreMap":447},[451,1379,1380,1382,1385],{"class":453,"line":454},[451,1381,458],{"class":457},[451,1383,1384],{"class":461},"template",[451,1386,469],{"class":457},[451,1388,1389,1392,1395],{"class":453,"line":472},[451,1390,1391],{"class":457},"  \u003C",[451,1393,1394],{"class":461},"ShLoadingIndicator",[451,1396,1397],{"class":457}," \u002F>\n",[451,1399,1400,1402,1405],{"class":453,"line":479},[451,1401,1391],{"class":457},[451,1403,1404],{"class":461},"NuxtPage",[451,1406,1397],{"class":457},[451,1408,1409,1411,1413],{"class":453,"line":499},[451,1410,539],{"class":457},[451,1412,1384],{"class":461},[451,1414,469],{"class":457},[407,1416,1417,1418,1421],{},"This replaces ",[424,1419,1420],{},"\u003CNuxtLoadingIndicator>"," with the native Shopify loading bar for a more integrated experience.",[1423,1424,1425],"style",{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":447,"searchDepth":472,"depth":472,"links":1427},[1428,1429,1432,1438],{"id":404,"depth":472,"text":405},{"id":430,"depth":472,"text":433,"children":1430},[1431],{"id":552,"depth":479,"text":553},{"id":717,"depth":472,"text":720,"children":1433},[1434,1435,1436,1437],{"id":774,"depth":479,"text":775},{"id":888,"depth":479,"text":889},{"id":1056,"depth":479,"text":1057},{"id":1197,"depth":479,"text":1198},{"id":1356,"depth":472,"text":1357},"Use Shopify App Bridge and authenticated fetch in your embedded app.","md",null,{},{"title":1444,"description":1445},"App Bridge — shopify-app-nuxt","Learn how to use Shopify App Bridge, useAppBridge(), useShopifyFetch(), and the loading indicator in your Nuxt embedded app.","oLr3AH5HSEbZhic6383OrW2G-Pb3OLFoI_FykL3qFkM",[1448,1450],{"title":46,"path":47,"stem":48,"description":1449,"children":-1},"Handle and register Shopify webhooks with HMAC verification.",{"title":54,"path":55,"stem":56,"description":1451,"children":-1},"Overview and quick start guide for Shopify Polaris and App Bridge UI components.",1776217202080]