@frontic/nuxt

Nuxt module for integrating with Frontstack headless commerce. Provides auto-imported composables for data fetching with smart caching, page routing, and context management.

Features

• Smart caching via Pinia Colada - stale-while-revalidate, request deduplication, SSR hydration
• Type-safe composables - Full TypeScript support with generated types from your Frontstack schema
• Search & filtering - Ready-to-use search state management with filters, sorting, and pagination
• Page routing - Dynamic page resolution with automatic redirects and 404 handling
• Context management - Locale and region switching with cookie persistence
• Built-in proxy - CORS-free API requests through your Nuxt server

Installation

npx nuxi@latest module add @frontic/nuxt

Quick Start

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@frontic/nuxt'],
  frontic: {
    contextDomain: 'your-shop.com',
  },
})

Generate the Frontstack client:

npx @frontic/cli generate

Composables

useFronticPage

Dynamic page routing with automatic redirects and 404 handling:

const { page, data, type, block, alternates } = useFronticPage()

useFronticSearch

Full-featured search with filtering, sorting, and pagination:

const { result, state, searchTerm, filterResult, sortResult, loadNext } = useFronticSearch(
  'ProductSearch',
  {},
  {
    filter: {
      select: ['properties.color', 'properties.size'],
      label: { 'properties.color': 'Color' },
    },
    sorting: {
      label: { 'name:asc': 'Name A-Z', 'price.amount:asc': 'Price: Low to High' },
    },
  }
)

useFronticListing

Simple listing access:

const { listing, status, refresh } = useFronticListing('FeaturedProducts', { limit: 10 })

useFronticBlock

Fetch single blocks (products, categories):

const { block, status } = useFronticBlock('Product', 'product-handle')

useFronticContext

Manage locale and region:

const { contexts, current, update } = useFronticContext()

Configuration

export default defineNuxtConfig({
  frontic: {
    // Page routing
    contextDomain: 'your-shop.com',
    redirectOn301: true,
    throwOn404: true,

    // API proxy
    proxy: true, // or '/api/custom-path'
    fetchApiSecret: process.env.FRONTSTACK_FETCH_SECRET,

    // Context cookies
    contextCookieName: 'fs-context',
    contextCookieMaxAge: 31536000,

    // Composables
    composables: true, // or ['page', 'search', 'listing', 'block', 'context', 'client']

    // UI components (optional)
    prefix: 'Ui',
    componentDir: '@/components/ui',
  },
})

Documentation

Full documentation at docs.frontstack.dev/reference/nuxt-module

License

MIT