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.