@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

``bash
npx nuxi@latest module add @frontic/nuxt
`

Quick Start

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

Generate the Frontstack client:

`bash
npx @frontic/cli generate
`

Composables

$3

Dynamic page routing with automatic redirects and 404 handling:

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

$3

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

`typescript
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' },
},
}
)
`

$3

Simple listing access:

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

$3

Fetch single blocks (products, categories):

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

$3

Manage locale and region:

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

Configuration

`typescript
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