Frontic Nuxt Module Beta

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.