[{"data":1,"prerenderedAt":339},["ShallowReactive",2],{"weather-sleman":3,"i-solar:cloud-bold":13,"i-mdi:github":17,"i-mdi:linkedin":19,"i-mdi:instagram":21,"project-shopify-app-nuxt":23,"i-lineicons:nuxt":329,"i-lineicons:shopify":331,"i-lineicons:javascript":333,"i-solar:arrow-left-linear":335,"i-solar:pen-2-linear":337},{"condition":4,"description":4,"icon":5,"isDay":6,"temp":7,"feelsLike":8,"humidity":9,"windSpeed":10,"city":11,"fetchedAt":12},"Mist","https:\u002F\u002Fcdn.weatherapi.com\u002Fweather\u002F64x64\u002Fnight\u002F143.png",false,22.1,24.6,95,3.6,"Sleman",1777674340670,{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":16},0,24,"\u003Cpath fill=\"currentColor\" d=\"M16.286 20C19.442 20 22 17.472 22 14.353c0-2.472-1.607-4.573-3.845-5.338C17.837 6.194 15.415 4 12.476 4C9.32 4 6.762 6.528 6.762 9.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 11.53 2 13.426 2 15.765S3.919 20 6.286 20z\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":18},"\u003Cpath fill=\"currentColor\" d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":20},"\u003Cpath fill=\"currentColor\" d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":22},"\u003Cpath fill=\"currentColor\" d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3\"\u002F>",{"id":24,"title":25,"active":26,"body":27,"collaborators":311,"color":313,"date":314,"description":315,"extension":316,"github_url":258,"image":317,"meta":318,"month":319,"navigation":26,"path":320,"seo":321,"sitemap":322,"stacks":323,"status":314,"stem":327,"url":314,"__hash__":328},"project\u002Fproject\u002F11.shopify-app-nuxt.md","Shopify App Nuxt",true,{"type":28,"value":29,"toc":296},"minimark",[30,35,39,42,45,48,53,65,74,77,100,103,117,121,124,127,130,144,151,154,158,161,164,167,173,177,180,185,188,192,195,199,202,206,209,213,216,220,227,230,241,244,248,251,267,270,274,277,280,284,287,290,293],[31,32,34],"h2",{"id":33},"bridging-the-gap-in-shopify-app-development","Bridging the Gap in Shopify App Development",[36,37,38],"p",{},"Building a Shopify app is supposed to be straightforward—until you actually start.",[36,40,41],{},"On paper, Shopify provides everything you need: APIs, CLI tooling, and official templates. In practice, however, the experience is fragmented. You often find yourself jumping between documentation, stitching together authentication flows, handling embedded app behavior, and figuring out deployment on your own.",[36,43,44],{},"Even with modern tooling, the process still feels piecemeal.",[36,46,47],{},"And when you try to bring Nuxt into the picture, the gap becomes even more obvious.",[49,50,52],"h3",{"id":51},"the-problem-powerful-tools-fragmented-experience","The Problem: Powerful Tools, Fragmented Experience",[36,54,55,56,64],{},"Shopify’s ecosystem is powerful, but it’s heavily centered around its own stack and conventions. The official approach relies on scaffolding apps via CLI and predefined templates, which work—but are not always flexible or aligned with how modern frontend teams build applications. (",[57,58,63],"a",{"href":59,"rel":60,"title":62},"https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapps\u002Fgetting-started\u002Fcreate?utm_source=chatgpt.com",[61],"nofollow","Scaffold an app","Shopify",")",[36,66,67,68,64],{},"At the same time, solutions like Nuxt Shopify modules focus on API integration rather than providing a complete application foundation. They help you talk to Shopify—but not necessarily structure a full app. (",[57,69,73],{"href":70,"rel":71,"title":72},"https:\u002F\u002Fshopify.nuxtjs.org\u002Fgetting-started\u002Fintroduction?utm_source=chatgpt.com",[61],"Introduction - Nuxt Shopify","Nuxt Shopify",[36,75,76],{},"This creates a gap:",[78,79,80,88,94],"ul",{},[81,82,83,84],"li",{},"You have tools to ",[85,86,87],"strong",{},"connect to Shopify",[81,89,90,91],{},"But not a clear way to ",[85,92,93],{},"build a full app with good DX",[81,95,96,97],{},"Especially when using ",[85,98,99],{},"Nuxt as the primary framework",[36,101,102],{},"As a result, developers often:",[78,104,105,108,111,114],{},[81,106,107],{},"Rebuild authentication logic repeatedly",[81,109,110],{},"Reconfigure embedded app behavior from scratch",[81,112,113],{},"Recreate API handling patterns across projects",[81,115,116],{},"Spend time solving infrastructure instead of building features",[49,118,120],{"id":119},"why-we-built-this","Why We Built This",[36,122,123],{},"We didn’t set out to create just another boilerplate.",[36,125,126],{},"We built this project because we kept solving the same problems over and over again.",[36,128,129],{},"Every new Shopify app started with the same questions:",[78,131,132,135,138,141],{},[81,133,134],{},"How should authentication be structured?",[81,136,137],{},"Where should Shopify API calls live?",[81,139,140],{},"How do we handle embedded context cleanly?",[81,142,143],{},"How do we deploy this without breaking everything?",[36,145,146,147,150],{},"Instead of answering those questions repeatedly, we decided to create a ",[85,148,149],{},"consistent starting point","—one that reflects how we actually build apps in production.",[36,152,153],{},"This project is our answer to that.",[49,155,157],{"id":156},"building-the-bridge","Building the Bridge",[36,159,160],{},"The Shopify App Nuxt Starter is designed as a bridge between Shopify’s ecosystem and modern Nuxt development.",[36,162,163],{},"It doesn’t try to replace Shopify’s tooling—instead, it builds on top of it, while reshaping the developer experience into something more structured and intuitive.",[36,165,166],{},"The goal is simple:",[168,169,170],"blockquote",{},[36,171,172],{},"Take the complexity of Shopify app setup and turn it into a clean, reusable foundation.",[49,174,176],{"id":175},"what-this-starter-provides","What This Starter Provides",[36,178,179],{},"Rather than being minimal or overly abstract, this starter focuses on the parts that matter most:",[181,182,184],"h4",{"id":183},"_1-a-clear-application-structure","1. A Clear Application Structure",[36,186,187],{},"The project is organized in a way that feels natural for Nuxt developers—so you don’t have to fight the framework or guess where things belong.",[181,189,191],{"id":190},"_2-authentication-flow-already-wired","2. Authentication Flow, Already Wired",[36,193,194],{},"Authentication is one of the trickiest parts of Shopify apps. This starter provides a working foundation that you can understand and extend, instead of rebuilding it from scratch.",[181,196,198],{"id":197},"_3-embedded-app-handling","3. Embedded App Handling",[36,200,201],{},"Running inside Shopify Admin introduces constraints that are easy to get wrong. This project ensures the app behaves correctly within that environment.",[181,203,205],{"id":204},"_4-api-integration-layer","4. API Integration Layer",[36,207,208],{},"Instead of scattering API calls everywhere, the structure encourages a clean separation between UI and Shopify communication.",[181,210,212],{"id":211},"_5-deployment-ready-setup","5. Deployment-Ready Setup",[36,214,215],{},"The project is designed to work seamlessly in modern environments like Vercel, reducing the friction between development and production.",[49,217,219],{"id":218},"developer-experience-first","Developer Experience First",[36,221,222,223,226],{},"The core philosophy behind this project is simple: ",[85,224,225],{},"optimize for developer experience without hiding complexity",".",[36,228,229],{},"We avoid “magic” abstractions that make things harder to debug later. Instead, we aim for:",[78,231,232,235,238],{},[81,233,234],{},"Transparency: You can see how everything works",[81,236,237],{},"Predictability: The structure stays consistent as the app grows",[81,239,240],{},"Flexibility: You can adapt it to your own needs",[36,242,243],{},"This makes the starter useful not just for quick prototypes, but also for real production apps.",[49,245,247],{"id":246},"live-preview-and-repository","Live Preview and Repository",[36,249,250],{},"You can explore the project here:",[78,252,253,260],{},[81,254,255,256],{},"Repository: ",[57,257,258],{"href":258,"rel":259},"https:\u002F\u002Fgithub.com\u002Fkiriminaja\u002Fshopify-app-nuxt",[61],[81,261,262,263],{},"Preview: ",[57,264,265],{"href":265,"rel":266},"https:\u002F\u002Fshopify-app-nuxt.vercel.app",[61],[36,268,269],{},"It’s designed to be easy to clone, run, and adapt—so you can start building immediately.",[49,271,273],{"id":272},"not-just-a-boilerplate","Not Just a Boilerplate",[36,275,276],{},"This project is not meant to be a throwaway starter.",[36,278,279],{},"It’s built from real-world usage, and intended to evolve over time. As Shopify and Nuxt continue to grow, this starter will continue to adapt—serving as a practical foundation for building apps in this ecosystem.",[49,281,283],{"id":282},"rethinking-the-starting-point","Rethinking the Starting Point",[36,285,286],{},"Just like deployment tools need better UX for Product teams, developer tools need better starting points for engineers.",[36,288,289],{},"This project is about redefining that starting point.",[36,291,292],{},"Instead of repeatedly solving the same setup problems, you begin with a foundation that already works—so you can focus on what actually matters: building features, delivering value, and shipping faster.",[36,294,295],{},"That’s the gap we’re trying to bridge.",{"title":297,"searchDepth":298,"depth":298,"links":299},"",2,[300],{"id":33,"depth":298,"text":34,"children":301},[302,304,305,306,307,308,309,310],{"id":51,"depth":303,"text":52},3,{"id":119,"depth":303,"text":120},{"id":156,"depth":303,"text":157},{"id":175,"depth":303,"text":176},{"id":218,"depth":303,"text":219},{"id":246,"depth":303,"text":247},{"id":272,"depth":303,"text":273},{"id":282,"depth":303,"text":283},[312],"yanuaraditia","rgb(34, 197, 94)",null,"shopify-app-nuxt is a Nuxt 4 module that provides authentication, webhooks, Polaris components, and App Bridge integration for building Shopify apps with Nuxt. Inspired by @shopify\u002Fshopify-app-react-router, it brings the same capabilities to the Nuxt ecosystem.","md","\u002Fimages\u002Fproject\u002Fshopify.webp",{},"2026-03","\u002Fproject\u002Fshopify-app-nuxt",{"title":25,"description":315},{"loc":320},[324,325,326],"nuxt","shopify","javascript","project\u002F11.shopify-app-nuxt","W8sHYAkj435yupVb3v--sNWtHwKyaA7DJm9Lz8Zhi5w",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":330},"\u003Cpath fill=\"currentColor\" d=\"M13.2 18.666h7.4c.236 0 .462-.083.667-.2c.204-.117.415-.264.533-.466c.118-.203.2-.433.2-.667s-.082-.464-.2-.667l-5-8.6a1.2 1.2 0 0 0-.467-.466a1.6 1.6 0 0 0-.733-.2c-.236 0-.462.083-.667.2a1.2 1.2 0 0 0-.466.466l-1.267 2.2L10.667 6c-.118-.203-.262-.417-.467-.534s-.43-.133-.667-.133c-.236 0-.462.016-.666.133s-.416.33-.534.534l-6.2 10.666c-.118.203-.133.433-.133.667s.015.464.133.667c.118.202.33.35.534.466s.43.2.666.2H8c1.85 0 3.195-.83 4.133-2.4l2.267-3.933l1.2-2.067l3.667 6.267H14.4zm-5.267-2.133H4.667l4.866-8.4l2.467 4.2l-1.634 2.848c-.623 1.02-1.333 1.352-2.433 1.352\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":332},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14.625 4.499c.374-.126.624-.126.624-.126L14.503 22L3.252 19.875S4.75 8.5 4.75 8.125c0-.498 0-.498.624-.749c.054 0 .203-.047.435-.121a21 21 0 0 1 1.314-.38C7.5 5.25 8.75 2 11.374 2c.377 0 .75.123 1 .624h.126c1.125 0 1.75.875 2.125 1.875m-3.542 1.137c.438-.134.891-.272 1.292-.513c0-.75-.126-1.251-.251-1.752c-.624.25-1.373 1-1.75 2.501a9 9 0 0 1 .709-.236m.542-2.761c-.125-.126-.25-.126-.376-.126c-1.752 0-2.874 2.374-3.25 3.878c.25-.063.5-.157.75-.251s.5-.188.751-.25c.376-2 1.376-2.875 2.125-3.251m-1.376 8.122c.75 0 1.499.376 1.499.376l.499-2.248s-.499-.25-1.499-.25c-2.75 0-4 1.749-4 3.624c0 1.26.708 1.814 1.33 2.3c.487.38.92.72.92 1.324c0 .248-.125.749-.749.749c-.874 0-1.874-.875-1.874-.875l-.502 1.75s1 1.25 3 1.25c1.624 0 2.875-1.25 2.875-3.125c0-1.53-1.031-2.265-1.83-2.833c-.507-.36-.92-.654-.92-1.042c0-.25 0-1 1.251-1m2.499-7.626c.125.376.25.877.25 1.501v.125c.189 0 .345-.031.5-.062c.157-.032.313-.063.5-.063c-.25-.752-.626-1.501-1.25-1.501m5.624 2.376c.125 0 .25 0 .25.125c0 .063.538 3.79 1.072 7.498c.528 3.668 1.054 7.316 1.054 7.377l-6 1.25l.75-17.498h.125l1.125 1.122s1.499.126 1.624.126\" clip-rule=\"evenodd\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":334},"\u003Cpath fill=\"currentColor\" d=\"M3 3v18h18V3zm9.813 14.023c0 1.77-1.045 2.584-2.555 2.584c-1.335 0-2.12-.697-2.526-1.568l1.394-.871c.232.493.493.87 1.103.87c.58 0 .9-.203.9-1.073v-5.69h1.684zm4.006 2.584c-1.567 0-2.583-.784-3.106-1.713l1.394-.813c.377.58.87 1.016 1.683 1.016c.697 0 1.133-.32 1.133-.871c0-.58-.436-.784-1.22-1.133l-.406-.174c-1.22-.493-2.033-1.19-2.033-2.584c0-1.277.93-2.206 2.468-2.206c1.075 0 1.83.378 2.38 1.364l-1.305.871c-.29-.493-.581-.725-1.104-.725c-.493 0-.813.32-.813.726c0 .493.32.696 1.017 1.016l.406.174c1.422.61 2.264 1.22 2.264 2.67c.03 1.54-1.16 2.381-2.758 2.381\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":336},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M20 12H4m0 0l6-6m-6 6l6 6\"\u002F>",{"left":14,"top":14,"width":15,"height":15,"rotate":14,"vFlip":6,"hFlip":6,"body":338},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\u003Cpath stroke-linecap=\"round\" d=\"M4 22h16\"\u002F>\u003Cpath d=\"m13.888 3.663l.742-.742a3.146 3.146 0 1 1 4.449 4.45l-.742.74m-4.449-4.448s.093 1.576 1.483 2.966s2.966 1.483 2.966 1.483m-4.449-4.45L7.071 10.48c-.462.462-.693.692-.891.947a5.2 5.2 0 0 0-.599.969c-.139.291-.242.601-.449 1.22l-.875 2.626m14.08-8.13l-6.817 6.817c-.462.462-.692.692-.947.891q-.451.352-.969.599c-.291.139-.601.242-1.22.448l-2.626.876m0 0l-.641.213a.848.848 0 0 1-1.073-1.073l.213-.641m1.501 1.5l-1.5-1.5\"\u002F>\u003C\u002Fg>",1777677543277]