npm package: @frontic/nuxt
Description: Nuxt module for Frontic - data fetching composables with smart caching, page routing, and context management
Author: Frontic
Latest version: 0.6.0

# @frontic/nuxt

Nuxt module for building with the [Frontic](https://frontic.com) API and [Frontic UI](https://ui.frontic.com) components. Provides auto-imported composables for data fetching with smart caching, page routing, and context management.

## Features

- **Smart caching** via [Pinia Colada](https://pinia-colada.esm.dev/) - stale-while-revalidate, request deduplication, SSR hydration
- **Type-safe composables** - Full TypeScript support with generated types from your Frontic schema
- **Search & filtering** - Ready-to-use search state management with filters, sorting, pagination, and infinite scroll
- **Page routing** - Dynamic page resolution with automatic redirects and 404 handling
- **Context management** - Locale and region switching with cookie persistence
- **Infinite scroll** - Bidirectional infinite loading with deep-link support via Pinia Colada's `useInfiniteQuery`
- **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 Frontic client:

```bash
npx @frontic/cli generate
```

## Composables

### useFronticPage

Dynamic page routing with automatic redirects and 404 handling:

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

### useFronticSearch

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

### useFronticListing

Simple listing access:

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

### useFronticBlock

Fetch single blocks (products, categories):

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

### useFronticContext

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.FRONTIC_FETCH_SECRET,

    // Context cookies
    contextCookieName: 'fs-context',
    contextCookieMaxAge: 31536000,

    // Composables
    composables: true, // or ['page', 'search', 'listing', 'block', 'context', 'client']

    // UI components (optional)
    componentsPrefix: '',
    componentDir: '@/components/ui',
  },
})
```

## Documentation

Full documentation at [docs.frontic.com](https://docs.frontic.com)

## License

MIT