Component Library2026

Headless Kit

VueNuxtStorefront APIComponentsHeadless

A production-ready Vue/Nuxt component library for building headless Shopify storefronts — pre-built cart, product, collection, and checkout components with full TypeScript support.

The Challenge

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.

The Solution

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.

Design

Code

Result

components/ShopifyProduct.vuevue
  1<script setup lang="ts">  2import { useProduct, useCart } from '@juanify/storefront-kit'  3  4const props = defineProps<{ handle: string }>()  5  6const { product, selectedVariant, selectOption } = useProduct(props.handle)  7const { addToCart, isAdding } = useCart()  8  9const handleAdd = () => { 10  if (!selectedVariant.value) return 11  addToCart({ 12    merchandiseId: selectedVariant.value.id, 13    quantity: 1, 14  }) 15} 16</script> 17 18<template> 19  <div v-if="product"> 20    <slot 21      :product="product" 22      :selected-variant="selectedVariant" 23      :select-option="selectOption" 24      :add-to-cart="handleAdd" 25      :is-adding="isAdding" 26    /> 27  </div> 28</template> 29

Scroll to explore

Tech Stack

Vue 3Nuxt 3Storefront APIGraphQL CodegenTypeScriptViteVitestHistoire

Next Project

Store Bridge

Interested in similar work?

Let's discuss how I can help bring your Shopify project to life.