@setu/storefront

Headless composables, types, and utilities for Vue 3 storefronts built on the Setu commerce backend.

Install

npm install @setu/storefront

Peer dependencies

npm install vue @inertiajs/vue3
# optional
npm install @unhead/vue

What's included

Composables

| Export | Purpose | |---|---| | useCart() | Cart mutations (add, update qty, remove) via fetch; updates Inertia shared props | | useWishlist() | Wishlist toggle (isWishlisted, toggleWishlist, removeItem) | | useSharedProps() | Reads auth.customer, tenant, cart, navItems, flash from Inertia | | useUrlMultiParam(key) | Reactive multi-value URL param (filters, facets) with toggle/add/remove/clear | | useUrlParam(key) | Reactive single-value URL param (sort, page, search) | | useUrlReset() | Clear all query params in one navigation | | useSeoHead() | Page title, meta, og:image, JSON-LD via @unhead/vue |

Utilities

| Export | Purpose | |---|---| | formatPaise(n) | 8000 → "₹80" — all Setu prices are integer paise | | formatPaiseRange(min, max) | "₹80 – ₹120" or "from ₹80" | | cropStyles(media, slot) | CSS object for object-fit: cover with focal-point zoom | | dominantColor(media) | Hex color from media metadata for placeholder backgrounds | | resolveCrop(media, slot) | Raw crop rect (CropRect \| null) |

Types

Full TypeScript types for all Setu commerce resources: Product, Variant, Cart, CartLine, Order, OrderLine, Customer, Tenant, Media, and more.

Contracts

This package assumes the following about the Setu backend:

1. Paise pricing — all price fields on the wire are integer paise. Use formatPaise to display them.
2. CSRF — a <meta name="csrf-token"> element must be present; composables read it on every mutation.
3. Shared props — Inertia page props include auth.customer, tenant, cart, wishlist, nav_items at the top level (set by StorefrontSharedProps plug on the server).
4. API routes — cart mutations at /cart/add, /cart/update/:id, /cart/remove/:id; wishlist at /account/wishlist/add, /account/wishlist/remove/:id. All return { ok: boolean, cart/wishlist: ... }.
5. Inertia — @inertiajs/vue3 must be configured in the host app. Composables use usePage() to read shared props reactively.

Usage

import { useCart, useWishlist, formatPaise } from '@setu/storefront'
import type { Product, Cart } from '@setu/storefront'

// In a Vue 3 component
const { addToCart, loading } = useCart()
const { isWishlisted, toggleWishlist } = useWishlist()

addToCart('variant-uuid', 1)
toggleWishlist('variant-uuid')
formatPaise(8000) // "₹80"

What's NOT included

• Vue components (see @setu/storefront-ui — coming soon)
• Admin panel logic
• Domain-specific features (textile customization, serialized inventory)
• CSS or Tailwind configuration