Frontend teams using Nuxt can now integrate Frontic with a dedicated module. The Frontic Nuxt Module handles configuration, data fetching, and type generation automatically.
What's New
Zero-Config Setup - Add the module to your Nuxt config and you're ready. Auto-imports composables and configures the Frontic client.
Type Safety - Full TypeScript support with types generated from your Frontic project schema. Your IDE knows exactly what data is available.
Built-in Proxy - CORS-free API requests out of the box. The module sets up a server proxy at /api/stack that handles authentication and forwards requests to Frontic. Configure a custom path or disable entirely.
Selective Composables - Enable only what you need. Configure composables: ['listing', 'page'] to reduce bundle size by excluding unused features.
Composables
Six composables cover all common patterns:
useFronticClient() - Low-level API client for custom requests
useFronticListing() - Simple listing fetches with caching
useFronticSearch() - Full-featured search (see below)
useFronticPage() - Dynamic page routing with 301/404 handling
useFronticBlock() - Single block fetches (products, categories)
useFronticContext() - Locale/region management with cookie persistence
useFronticSearch in Detail
useFronticSearch goes beyond simple data fetching. It's a complete search state manager:
Filter Management - filterResult(), addFilter(), removeFilter(), resetFilter() with OR/AND logic support
Sorting - sortResult() with configurable allowed sorts and labels
Pagination - paginate('next'), paginate('prev'), loadNext() for infinite scroll
Debounced Search - Bind searchTerm to an input with configurable threshold and debounce
State Tracking - state.active shows current filters/sorts, state.available shows options from the API response
const search = useFronticSearch('ProductSearch', {}, {
orFilter: ['properties.color', 'options.size'],
searchTermThreshold: 2,
filter: { label: { 'properties.color': 'Color' } },
sorting: { label: { 'name:asc': 'Name A-Z' } }
})
// Full search UI state management
await search.filterResult('properties.color', ['Red', 'Blue'])
await search.sortResult('name:asc')
await search.loadNext()
Beta Status
The Nuxt Module is in beta while we finalize the API surface. We're looking for feedback on the composable design and type generation.
Documentation
Full reference at docs.frontic.com/reference/nuxt-module.