Nuxt module for Frontstack headless commerce - zero config data fetching composables with smart caching, page routing, and context management
npm install @frontic/nuxtNuxt module for integrating with Frontstack headless commerce. Provides auto-imported composables for data fetching with smart caching, page routing, and context management.
- 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
``bash`
npx nuxi@latest module add @frontic/nuxt
`typescript`
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@frontic/nuxt'],
frontic: {
contextDomain: 'your-shop.com',
},
})
Generate the Frontstack client:
`bash`
npx @frontic/cli generate
Dynamic page routing with automatic redirects and 404 handling:
`typescript`
const { page, data, type, block, alternates } = useFronticPage()
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' },
},
}
)
Simple listing access:
`typescript`
const { listing, status, refresh } = useFronticListing('FeaturedProducts', { limit: 10 })
Fetch single blocks (products, categories):
`typescript`
const { block, status } = useFronticBlock('Product', 'product-handle')
Manage locale and region:
`typescript`
const { contexts, current, update } = useFronticContext()
`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',
},
})
``
Full documentation at docs.frontstack.dev/reference/nuxt-module
MIT