[{"data":1,"prerenderedAt":1185},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-introduction":396,"-getting-started-introduction-surround":1182},[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":11,"body":398,"description":1173,"extension":1174,"links":1175,"meta":1176,"navigation":1177,"path":12,"seo":1178,"stem":13,"__hash__":1181},"docs\u002F1.getting-started\u002F2.introduction.md",{"type":399,"value":400,"toc":1162},"minimark",[401,406,419,440,455,463,471,483,495,507,738,745,753,765,776,780,789,801,807,846,849,853,856,936,939,943,1109,1113,1116],[402,403,405],"h2",{"id":404},"what-is-shopify-app-nuxt","What is shopify-app-nuxt?",[407,408,409,413,414,418],"p",{},[410,411,412],"code",{},"shopify-app-nuxt"," is a ",[415,416,417],"strong",{},"Nuxt 4 module"," that integrates Shopify into Nuxt applications — providing authentication, webhooks, billing, session management, Polaris components, and App Bridge.",[407,420,421,422,425,426,435,436,439],{},"It is the ",[415,423,424],{},"Nuxt equivalent"," of ",[427,428,432],"a",{"href":429,"rel":430},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@shopify\u002Fshopify-app-remix",[431],"nofollow",[410,433,434],{},"@shopify\u002Fshopify-app-react-router",". It builds on ",[410,437,438],{},"@shopify\u002Fshopify-api"," and creates a module layer that allows your app to communicate with and authenticate requests from Shopify.",[407,441,442,443,448,449,454],{},"By default, your app behaves as an ",[427,444,447],{"href":445,"rel":446},"https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapps\u002Fauth\u002Foauth\u002Fsession-tokens",[431],"embedded app"," running inside the Shopify Admin iframe, using the CDN-based ",[427,450,453],{"href":451,"rel":452},"https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapps\u002Ftools\u002Fapp-bridge",[431],"Shopify App Bridge"," for frontend authentication.",[456,457,458,459,462],"warning",{},"This package is a ",[415,460,461],{},"release candidate",". The API is mostly stable but may still change before the 1.0 release.",[402,464,466,467,470],{"id":465},"how-is-this-different-from-nuxtjsshopify","How is this different from ",[410,468,469],{},"@nuxtjs\u002Fshopify","?",[407,472,473,479,480,482],{},[427,474,477],{"href":475,"rel":476},"https:\u002F\u002Fshopify.nuxtjs.org",[431],[410,478,469],{}," and ",[410,481,412],{}," solve fundamentally different problems — you may even use both in the same project.",[407,484,485,413,487,490,491,494],{},[410,486,469],{},[415,488,489],{},"storefront\u002Fheadless module",". It's primarily built for merchants creating custom storefronts — product pages, carts, checkout flows — using the Storefront API. It also supports Admin API access (via client credentials, static token, or offline refresh token), webhooks (HMAC validation + CLI management), Customer Account API, and zero-config GraphQL codegen. However, it's designed around ",[415,492,493],{},"single-store access"," — your app talks to one Shopify store using pre-configured credentials. There's no OAuth flow for onboarding multiple merchants, no App Bridge, and no Polaris UI — because storefronts don't need those.",[407,496,497,499,500,503,504,506],{},[410,498,412],{}," is an ",[415,501,502],{},"embedded app framework",". It's for developers building Shopify apps that run inside the Shopify Admin — authenticating multiple merchants via OAuth, exchanging session tokens, managing per-shop sessions, and rendering Polaris UI inside the Admin iframe. Think of it as the Nuxt equivalent of ",[410,505,434],{},".",[508,509,510,531],"table",{},[511,512,513],"thead",{},[514,515,516,519,526],"tr",{},[517,518],"th",{},[517,520,521],{},[427,522,524],{"href":475,"rel":523},[431],[410,525,469],{},[517,527,528,530],{},[410,529,412],{}," (this package)",[532,533,534,548,561,577,590,603,615,632,645,657,668,688,700,712,724],"tbody",{},[514,535,536,542,545],{},[537,538,539],"td",{},[415,540,541],{},"Primary use case",[537,543,544],{},"Headless storefront \u002F custom store",[537,546,547],{},"Shopify embedded admin app",[514,549,550,555,558],{},[537,551,552],{},[415,553,554],{},"Who it's for",[537,556,557],{},"Merchants building custom storefronts",[537,559,560],{},"Developers building Shopify apps",[514,562,563,568,571],{},[537,564,565],{},[415,566,567],{},"Storefront API",[537,569,570],{},"✅ First-class support",[537,572,573,574,576],{},"❌ (use ",[410,575,469],{}," alongside)",[514,578,579,584,587],{},[537,580,581],{},[415,582,583],{},"Customer Account API",[537,585,586],{},"✅ Built-in auth flow",[537,588,589],{},"❌",[514,591,592,597,600],{},[537,593,594],{},[415,595,596],{},"Admin API",[537,598,599],{},"✅ Single store (client credentials \u002F static \u002F refresh token)",[537,601,602],{},"✅ Multi-tenant, OAuth + per-merchant session tokens",[514,604,605,609,612],{},[537,606,607],{},[415,608,46],{},[537,610,611],{},"✅ HMAC validation + CLI subscribe\u002Funsubscribe",[537,613,614],{},"✅ HMAC validation + programmatic registration",[514,616,617,622,625],{},[537,618,619],{},[415,620,621],{},"GraphQL codegen",[537,623,624],{},"✅ Zero-config, hot-reloaded types",[537,626,627,628,631],{},"✅ Opt-in via ",[410,629,630],{},"codegen"," option, auto-generates on prepare",[514,633,634,639,642],{},[537,635,636],{},[415,637,638],{},"Multi-tenant (many merchants)",[537,640,641],{},"❌ Single store credentials",[537,643,644],{},"✅ OAuth per merchant, session storage",[514,646,647,652,654],{},[537,648,649],{},[415,650,651],{},"Runs inside Shopify Admin",[537,653,589],{},[537,655,656],{},"✅ App Bridge iframe",[514,658,659,663,665],{},[537,660,661],{},[415,662,50],{},[537,664,589],{},[537,666,667],{},"✅ CDN-based, auto-injected",[514,669,670,675,677],{},[537,671,672],{},[415,673,674],{},"Polaris components",[537,676,589],{},[537,678,679,680,683,684,687],{},"✅ Vue wrappers (",[410,681,682],{},"Sh*",", ",[410,685,686],{},"ShUi*",")",[514,689,690,695,697],{},[537,691,692],{},[415,693,694],{},"Billing API",[537,696,589],{},[537,698,699],{},"✅",[514,701,702,707,709],{},[537,703,704],{},[415,705,706],{},"Per-shop session storage",[537,708,589],{},[537,710,711],{},"✅ Pluggable adapters",[514,713,714,719,721],{},[537,715,716],{},[415,717,718],{},"Bot detection",[537,720,589],{},[537,722,723],{},"✅ Auto 410 for bots",[514,725,726,731,734],{},[537,727,728],{},[415,729,730],{},"Equivalent to",[537,732,733],{},"Shopify Hydrogen \u002F storefront SDKs",[537,735,736],{},[410,737,434],{},[407,739,740,741,744],{},"Both modules support Admin API and webhooks, but the key difference is ",[415,742,743],{},"who they're built for",":",[407,746,747,752],{},[415,748,749,750],{},"Use ",[410,751,469],{}," if you're building a custom Nuxt storefront for a single Shopify store — product pages, collections, cart, checkout. It excels at storefront data fetching, Customer Account API, GraphQL codegen, and CLI-based webhook management.",[407,754,755,759,760,506],{},[415,756,749,757],{},[410,758,412],{}," if you're building a Shopify app that multiple merchants install — something that runs inside the Shopify Admin, authenticates each merchant via OAuth, handles per-merchant session tokens, and renders Polaris UI. This is what you need to publish on the ",[427,761,764],{"href":762,"rel":763},"https:\u002F\u002Fapps.shopify.com",[431],"Shopify App Store",[407,766,767,770,771,775],{},[415,768,769],{},"Use both together"," if your app needs embedded admin functionality ",[772,773,774],"em",{},"and"," storefront data access — they complement each other.",[402,777,779],{"id":778},"why-we-built-this","Why We Built This",[407,781,782,783,788],{},"Shopify's official app framework, ",[427,784,786],{"href":429,"rel":785},[431],[410,787,434],{},", only supports React Router (formerly Remix). There's no official equivalent for Nuxt or Vue.",[407,790,791,792,797,798,800],{},"At ",[427,793,796],{"href":794,"rel":795},"https:\u002F\u002Fkiriminaja.com",[431],"KiriminAja",", our team uses Nuxt across all our projects. When we needed to build Shopify apps, we faced a framework knowledge gap — our developers are experienced with Nuxt and Vue, not React. Rather than forcing the team to learn an entirely different stack just for Shopify, we built ",[410,799,412],{}," to bring the same capabilities to the framework we already know.",[407,802,803,804,806],{},"This module bridges that gap by reimplementing the core functionality of ",[410,805,434],{}," for Nuxt:",[808,809,810,817,822,834],"ul",{},[811,812,813,816],"li",{},[415,814,815],{},"OAuth & session management"," — ported from React Router's auth flow to Nuxt server routes",[811,818,819,821],{},[415,820,50],{}," — using the CDN approach (framework-agnostic) with Vue composables",[811,823,824,826,827,829,830,833],{},[415,825,674],{}," — Vue wrappers (",[410,828,682],{},") for Shopify's web components, since ",[410,831,832],{},"@shopify\u002Fpolaris"," is React-only",[811,835,836,826,839,841,842,845],{},[415,837,838],{},"App Bridge UI",[410,840,686],{},") replacing ",[410,843,844],{},"@shopify\u002Fapp-bridge-react"," components",[407,847,848],{},"If your team is in a similar situation — experienced with Vue\u002FNuxt but needing to build Shopify apps — this module is for you.",[402,850,852],{"id":851},"why-nuxt","Why Nuxt?",[407,854,855],{},"Beyond familiarity, Nuxt brings real technical advantages over React Router for building Shopify apps:",[808,857,858,876,888,900,912,924,930],{},[811,859,860,863,864,869,870,875],{},[415,861,862],{},"Rolldown + Vite integration"," — Nuxt is built on ",[427,865,868],{"href":866,"rel":867},"https:\u002F\u002Fvite.dev",[431],"Vite"," with upcoming ",[427,871,874],{"href":872,"rel":873},"https:\u002F\u002Frolldown.rs",[431],"Rolldown"," support, delivering blazing-fast HMR and optimized production builds powered by Rust-based bundling.",[811,877,878,881,882,887],{},[415,879,880],{},"Powerful DevTools"," — ",[427,883,886],{"href":884,"rel":885},"https:\u002F\u002Fdevtools.nuxt.com",[431],"Nuxt DevTools"," provides an in-browser panel for inspecting components, routes, state, server API routes, modules, and more — far beyond what React DevTools offers out of the box.",[811,889,890,893,894,899],{},[415,891,892],{},"Rich module ecosystem"," — Over 200+ modules maintained by the ",[427,895,898],{"href":896,"rel":897},"https:\u002F\u002Fnuxt.com\u002Fmodules",[431],"Nuxt team"," and community, covering everything from authentication and content management to SEO, image optimization, and database integration.",[811,901,902,905,906,911],{},[415,903,904],{},"Backed by the Vue & Nuxt core teams"," — Vue and Nuxt are actively maintained by dedicated core teams. The ",[427,907,910],{"href":908,"rel":909},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fblob\u002Fmain\u002FCHANGELOG.md",[431],"Vue roadmap"," continues to deliver performance improvements like Vapor Mode (a compilation strategy that eliminates the virtual DOM for even faster rendering).",[811,913,914,917,918,923],{},[415,915,916],{},"Nitro server engine"," — Nuxt's server layer (",[427,919,922],{"href":920,"rel":921},"https:\u002F\u002Fnitro.build",[431],"Nitro",") provides auto-imported server utilities, file-based API routes, and deployment to 15+ hosting providers with zero config.",[811,925,926,929],{},[415,927,928],{},"Auto-imports everywhere"," — Components, composables, and server utilities are auto-imported. No boilerplate, no manual import statements cluttering your code.",[811,931,932,935],{},[415,933,934],{},"TypeScript by default"," — Full TypeScript support with auto-generated types for routes, config, and API responses — without extra configuration.",[407,937,938],{},"By choosing Nuxt, you get a modern, batteries-included framework that's continuously improving — and you don't have to give any of that up just because you're building a Shopify app.",[402,940,942],{"id":941},"key-features","Key Features",[508,944,945,955],{},[511,946,947],{},[514,948,949,952],{},[517,950,951],{},"Feature",[517,953,954],{},"Description",[532,956,957,966,978,991,1007,1020,1029,1038,1048,1065,1075,1084,1094],{},[514,958,959,963],{},[537,960,961],{},[415,962,42],{},[537,964,965],{},"OAuth flow, session tokens, token exchange — all handled automatically",[514,967,968,972],{},[537,969,970],{},[415,971,50],{},[537,973,974,975],{},"CDN-based App Bridge with full TypeScript types via ",[410,976,977],{},"@shopify\u002Fapp-bridge-types",[514,979,980,985],{},[537,981,982],{},[415,983,984],{},"Polaris",[537,986,987,988,990],{},"Vue wrapper components (",[410,989,682],{},") for all Polaris web components with typed props",[514,992,993,997],{},[537,994,995],{},[415,996,838],{},[537,998,999,1000,1002,1003,1006],{},"Vue wrappers (",[410,1001,686],{},") for App Bridge ",[410,1004,1005],{},"ui-*"," components (modal, title bar, save bar, nav menu)",[514,1008,1009,1014],{},[537,1010,1011],{},[415,1012,1013],{},"Typed GraphQL",[537,1015,1016,1017],{},"Admin API client typed via ",[410,1018,1019],{},"@shopify\u002Fadmin-api-client",[514,1021,1022,1026],{},[537,1023,1024],{},[415,1025,46],{},[537,1027,1028],{},"HMAC validation, payload parsing, and webhook registration",[514,1030,1031,1035],{},[537,1032,1033],{},[415,1034,596],{},[537,1036,1037],{},"GraphQL client with automatic session management",[514,1039,1040,1045],{},[537,1041,1042],{},[415,1043,1044],{},"Billing",[537,1046,1047],{},"Billing context for subscription and usage-based charges",[514,1049,1050,1055],{},[537,1051,1052],{},[415,1053,1054],{},"Session Storage",[537,1056,1057,1058,1061,1062],{},"Built-in ",[410,1059,1060],{},"MemorySessionStorage"," default, pluggable via ",[410,1063,1064],{},"configureShopify()",[514,1066,1067,1072],{},[537,1068,1069],{},[415,1070,1071],{},"Auto-imports",[537,1073,1074],{},"Server utilities, client composables, and components are auto-imported",[514,1076,1077,1081],{},[537,1078,1079],{},[415,1080,718],{},[537,1082,1083],{},"Admin auth automatically detects bots and returns 410 to avoid unnecessary auth",[514,1085,1086,1091],{},[537,1087,1088],{},[415,1089,1090],{},"CORS",[537,1092,1093],{},"Built-in CORS helpers for public\u002Fcheckout extension endpoints",[514,1095,1096,1100],{},[537,1097,1098],{},[415,1099,58],{},[537,1101,1102,1103,1105,1106],{},"Opt-in typed Admin API queries via ",[410,1104,630],{}," option — auto-generates during ",[410,1107,1108],{},"nuxt prepare",[402,1110,1112],{"id":1111},"references","References",[407,1114,1115],{},"This module was built on top of and inspired by these projects:",[808,1117,1118,1130,1140,1153],{},[811,1119,1120,1126,1127,1129],{},[427,1121,1124],{"href":1122,"rel":1123},"https:\u002F\u002Fgithub.com\u002FShopify\u002Fshopify-app-js\u002Ftree\u002Fmain\u002Fpackages\u002Fapps\u002Fshopify-app-react-router",[431],[410,1125,434],{}," — Shopify's official React Router integration for building Shopify apps. ",[410,1128,412],{}," reimplements its core functionality for Nuxt.",[811,1131,1132,1139],{},[427,1133,1136],{"href":1134,"rel":1135},"https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fapp-bridge",[431],[410,1137,1138],{},"@shopify\u002Fapp-bridge"," — Shopify's App Bridge SDK for embedding apps in the Shopify Admin. We use the CDN-based approach with Vue composables.",[811,1141,1142,1147,1148,1152],{},[427,1143,1145],{"href":475,"rel":1144},[431],[410,1146,469],{}," — A Nuxt module for headless storefronts with Storefront API, Customer Account API, Admin API (static token), and GraphQL codegen. Solves a different problem — see the ",[427,1149,1151],{"href":1150},"#how-is-this-different-from-nuxtjsshopify","comparison table"," above.",[811,1154,1155,1161],{},[427,1156,1159],{"href":1157,"rel":1158},"https:\u002F\u002Fgithub.com\u002Ftravis-r6s\u002Fshopify-app-nuxt",[431],[410,1160,412],{}," — An early Nuxt module for Shopify apps by Travis Reynolds that proved the concept and inspired this project.",{"title":1163,"searchDepth":1164,"depth":1164,"links":1165},"",2,[1166,1167,1169,1170,1171,1172],{"id":404,"depth":1164,"text":405},{"id":465,"depth":1164,"text":1168},"How is this different from @nuxtjs\u002Fshopify?",{"id":778,"depth":1164,"text":779},{"id":851,"depth":1164,"text":852},{"id":941,"depth":1164,"text":942},{"id":1111,"depth":1164,"text":1112},"What is shopify-app-nuxt and why you should use it to build Shopify apps with Nuxt.","md",null,{},true,{"title":1179,"description":1180},"Introduction — shopify-app-nuxt","Learn what shopify-app-nuxt is, how it differs from @nuxtjs\u002Fshopify, and the features it provides for building Shopify apps.","szhOAj1oJO2QzhK6n9uCT6ODF2ybE_cU_Wk8BrhJdcc",[1175,1183],{"title":15,"path":16,"stem":17,"description":1184,"children":-1},"Install and configure shopify-app-nuxt in your Nuxt application.",1776217202080]