[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"work-shopify-storefront-kit":3},{"id":4,"title":5,"body":6,"category":116,"challenge":117,"codeSnippet":118,"description":122,"extension":123,"featured":124,"finalScreenshot":125,"gridOrder":126,"isDemo":124,"isDemoURL":109,"liveUrl":127,"meta":128,"mockupImage":129,"navigation":130,"nextProject":131,"order":134,"path":135,"results":127,"schneiderFeatured":124,"schneiderOrder":127,"seo":136,"solution":137,"stem":138,"subtitle":139,"tags":140,"techStack":146,"thumbnail":154,"thumbnailVideo":127,"year":155,"__hash__":156},"works/works/shopify-storefront-kit.md","Headless Kit",{"type":7,"value":8,"toc":108},"minimark",[9,14,18,22,47,64,70,76,80,86,95,101,105],[10,11,13],"h2",{"id":12},"the-problem","The Problem",[15,16,17],"p",{},"Shopify's Hydrogen framework solves the headless storefront problem for React teams, but the Vue/Nuxt ecosystem has no equivalent. Teams building headless Shopify stores with Vue start from zero: writing Storefront API queries, building cart state management, handling variant selection logic, and implementing the entire checkout flow. This foundational work takes 3-4 weeks before any actual storefront design begins.",[10,19,21],{"id":20},"architecture","Architecture",[15,23,24,28,29,33,34,33,37,33,40,33,43,46],{},[25,26,27],"strong",{},"Composable Layer"," — The library's core is a set of Vue composables (",[30,31,32],"code",{},"useProduct",", ",[30,35,36],{},"useCart",[30,38,39],{},"useCollection",[30,41,42],{},"useCustomer",[30,44,45],{},"useSearch",") that encapsulate all Storefront API interactions. Each composable manages its own state, caching, and error handling.",[15,48,49,52,53,33,56,59,60,63],{},[25,50,51],{},"Renderless Components"," — Components like ",[30,54,55],{},"\u003CShopifyProduct>",[30,57,58],{},"\u003CShopifyCart>",", and ",[30,61,62],{},"\u003CShopifyCollection>"," are renderless — they provide data and actions via scoped slots without imposing any markup or styling. This means the library works with any design system.",[15,65,66,69],{},[25,67,68],{},"Type Generation"," — GraphQL Codegen runs against the Storefront API schema to produce TypeScript types for every query response. Developers get full autocomplete and type checking for all product, variant, cart, and customer data.",[15,71,72,75],{},[25,73,74],{},"Nuxt Module"," — Ships as a Nuxt module that auto-configures the Storefront API client, provides auto-imports for all composables, and sets up SSR-compatible state hydration.",[10,77,79],{"id":78},"key-technical-decisions","Key Technical Decisions",[15,81,82,85],{},[25,83,84],{},"Why renderless over styled components?"," Styled component libraries force design compromises. Every Shopify storefront has unique branding requirements. By providing only logic and data, the library never fights the designer's vision. Developers compose the provided composables with their own markup.",[15,87,88,91,92,94],{},[25,89,90],{},"Why composables over a store/Pinia pattern?"," Composables are more granular and tree-shakeable. A product page only imports ",[30,93,32],{}," — it doesn't pull in cart or customer logic. This keeps bundle sizes minimal for each route.",[15,96,97,100],{},[25,98,99],{},"Why GraphQL Codegen?"," The Storefront API has a large, versioned schema. Manual type definitions would drift and require constant maintenance. Codegen ensures types always match the actual API version the project targets.",[10,102,104],{"id":103},"outcome","Outcome",[15,106,107],{},"The library has been used in 4 production headless Shopify builds. Average time from project kickoff to first design review dropped from 4 weeks to 5 days. The composable architecture means developers spend time on brand-specific features instead of rebuilding cart logic.",{"title":109,"searchDepth":110,"depth":110,"links":111},"",2,[112,113,114,115],{"id":12,"depth":110,"text":13},{"id":20,"depth":110,"text":21},{"id":78,"depth":110,"text":79},{"id":103,"depth":110,"text":104},"Component Library","Every headless Shopify project starts from scratch: wiring up the Storefront API, building cart state management, handling variant selection, implementing checkout flows. Teams rebuild the same foundational components project after project, wasting weeks before touching actual design work.",{"language":119,"filename":120,"code":121},"vue","components/ShopifyProduct.vue","\u003Cscript setup lang=\"ts\">\nimport { useProduct, useCart } from '@juanify/storefront-kit'\n\nconst props = defineProps\u003C{ handle: string }>()\n\nconst { product, selectedVariant, selectOption } = useProduct(props.handle)\nconst { addToCart, isAdding } = useCart()\n\nconst handleAdd = () => {\n  if (!selectedVariant.value) return\n  addToCart({\n    merchandiseId: selectedVariant.value.id,\n    quantity: 1,\n  })\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"product\">\n    \u003Cslot\n      :product=\"product\"\n      :selected-variant=\"selectedVariant\"\n      :select-option=\"selectOption\"\n      :add-to-cart=\"handleAdd\"\n      :is-adding=\"isAdding\"\n    />\n  \u003C/div>\n\u003C/template>\n","A production-ready Vue/Nuxt component library for building headless Shopify storefronts — pre-built cart, product, collection, and checkout components with full TypeScript support.","md",false,"/images/projects/shopify-storefront-kit-final.jpg",12,null,{},"/images/projects/shopify-storefront-kit-mockup.jpg",true,{"title":132,"slug":133},"Store Bridge","shopify-bff",6,"/works/shopify-storefront-kit",{"title":5,"description":122},"Created an open-source component library that provides composable, unstyled Vue components for every core Shopify storefront interaction. Built on Nuxt for SSR support with full TypeScript types generated directly from the Storefront API schema.","works/shopify-storefront-kit","Vue Components for Shopify Storefronts",[141,142,143,144,145],"Vue","Nuxt","Storefront API","Components","Headless",[147,148,143,149,150,151,152,153],"Vue 3","Nuxt 3","GraphQL Codegen","TypeScript","Vite","Vitest","Histoire","/images/projects/shopify-storefront-kit.jpg","2026","Vt1wE0m5zgvQTurJs9X6J54C2ZkIBqnYdgFz8A_cFxA",1773700381251]