Nuxt Module

// With options
const { block } = useFronticBlock('ProductCard', productId, {
  contextKey: contextToken,
  staleTime: 1000 * 60 * 10, // 10 minutes
})

// Reactive key - automatically refetches when key changes
const productKey = ref('product-123')
const { block } = useFronticBlock('ProductCard', productKey)

import type { Ref, MaybeRef } from 'vue'
import type { Blocks, Responses } from '@frontic/stack/generated-types'

function useFronticBlock<T extends keyof Blocks>(
  name: T,
  key: MaybeRef<string>,
  options?: {
    contextKey?: MaybeRef<string | undefined>
    contextDomain?: MaybeRef<string | undefined>
    requestUrl?: MaybeRef<string | undefined>
    staleTime?: number
  }
): {
  block: Ref<Responses[T] | undefined>
  status: Ref<'pending' | 'error' | 'success'>
  refresh: () => Promise<void>
  refetch: () => Promise<void>
}

// Reactive params - refetches when category changes
const categoryKey = ref('shoes')

const { listing } = useFronticListing(
  'CategoryProducts',
  computed(() => ({ key: categoryKey.value }))
)

import type { Ref, MaybeRef } from 'vue'
import type { Listings, ListingParameters, Responses } from '@frontic/stack/generated-types'

function useFronticListing<T extends keyof Listings>(
  name: T,
  params: MaybeRef<ListingParameters[T]>,
  options?: {
    contextKey?: MaybeRef<string | undefined>
    contextDomain?: MaybeRef<string | undefined>
    requestUrl?: MaybeRef<string | undefined>
    staleTime?: number
  }
): {
  listing: Ref<Responses[T] | undefined>
  status: Ref<'pending' | 'error' | 'success'>
  refresh: () => Promise<void>
  refetch: () => Promise<void>
}

<script setup lang="ts">
const { data, result, state, searchTerm, addFilter, removeFilter, sortResult, loadNext } = useFronticSearch(
  'CategoryProducts',
  { key: 'shoes' },
  {
    orFilter: ['properties.color', 'properties.size'],
    filter: {
      select: ['properties.color', 'properties.size', 'properties.brand'],
      label: {
        'properties.color': 'Color',
        'properties.size': 'Size',
        'properties.brand': 'Brand',
      },
    },
    sorting: {
      label: {
        default: 'Relevance',
        'name:asc': 'Name A-Z',
        'name:desc': 'Name Z-A',
        'price.amount:asc': 'Price: Low to High',
        'price.amount:desc': 'Price: High to Low',
      },
    },
  }
)

function toggleFilter(field: string, value: string, isSelected: boolean) {
  if (isSelected) {
    removeFilter(field, value)
  } else {
    addFilter(field, value)
  }
}
</script>

<template>
  <div class="search-page">
    <!-- Search Input -->
    <input v-model="searchTerm" type="search" placeholder="Search products..." />

    <!-- Sort Dropdown -->
    <select @change="sortResult(($event.target as HTMLSelectElement).value)">
      <option v-for="sort in state.available.sorting" :key="sort.key" :value="sort.key" :selected="state.active.sorting?.field === sort.key.split(':')[0]">
        {{ sort.label }}
      </option>
    </select>

    <!-- Filter Sidebar -->
    <aside>
      <div v-for="filter in state.available.filter" :key="filter.key">
        <h4>{{ filter.label }}</h4>
        <label v-for="option in filter.options" :key="option.value">
          <input type="checkbox" :checked="option.selected" @change="toggleFilter(filter.key, option.value, option.selected)" />
          {{ option.label }} ({{ option.count }})
        </label>
      </div>
    </aside>

    <!-- Results -->
    <main>
      <p>{{ state.available.count.result }} products found</p>
      <div class="product-grid">
        <article v-for="item in result" :key="item.key">
          <h3>{{ item.name }}</h3>
          <p>{{ item.price.formatted }}</p>
        </article>
      </div>
      <button v-if="data?.page?.next" @click="loadNext">Load More</button>
    </main>
  </div>
</template>

import type { Ref, MaybeRef } from 'vue'
import type { Listings, ListingParameters, Responses } from '@frontic/stack/generated-types'

// Typed filter for UI rendering
interface UiFilter<TFilters = Record<string, unknown>> {
  key: keyof TFilters & string
  label: string
  options: FilterOption[]
}

// Typed sort for UI rendering
interface UiSort<TSorts = Record<string, unknown>> {
  key: (keyof TSorts & string) | 'default'
  label: string
  value: (keyof TSorts & string) | 'default'
}

// Fully typed search state
interface SearchState<TFilters = Record<string, unknown>, TSorts = Record<string, unknown>> {
  active: {
    filter: Partial<Record<keyof TFilters & string, unknown>>
    sorting: { field: keyof TSorts & string; order: 'asc' | 'desc' } | undefined
    search: string
    page: number
    count: {
      filter: number
      sorting: number
    }
  }
  available: {
    filter: UiFilter<TFilters>[]
    sorting: UiSort<TSorts>[]
    nextPage: boolean
    prevPage: boolean
    count: {
      filter: number
      sorting: number
      result: number
      page: number
    }
  }
}

function useFronticSearch<TSearch extends keyof Listings, TFilters extends Record<string, unknown>, TSorts extends Record<string, unknown>>(
  name: TSearch,
  params: MaybeRef<ListingParameters[TSearch]>,
  options?: {
    contextKey?: MaybeRef<string | undefined>
    contextDomain?: MaybeRef<string | undefined>
    requestUrl?: MaybeRef<string | undefined>
    staleTime?: number
    cacheKey?: string
    searchTermThreshold?: number
    searchDebounce?: number
    orFilter?: Array<keyof TFilters & string>
    disableSearch?: boolean
    disableFilter?: boolean
    disableSorting?: boolean
    filter?: {
      select?: Array<keyof TFilters & string>
      mode?: 'include' | 'exclude'
      label?: Partial<Record<keyof TFilters & string, string>>
      sort?: Array<keyof TFilters & string> // Display order for filters
    }
    sorting?: {
      select?: Array<keyof TSorts & string>
      mode?: 'include' | 'exclude'
      label?: Record<string, string>
      sort?: Array<keyof TSorts & string> // Display order for sorts
    }
  }
): {
  data: Ref<Responses[TSearch] | undefined>
  result: Ref<unknown[] | undefined>
  status: Ref<'pending' | 'error' | 'success'>
  state: Ref<SearchState<TFilters, TSorts>> // Fully typed state
  searchTerm: Ref<string>
  loadNext: () => Promise<void>
  refresh: () => Promise<void>
  refetch: () => Promise<void>
  paginate: (direction: 'next' | 'prev') => Promise<boolean>
  sortResult: (sortBy?: string) => Promise<void>
  resetSorting: () => Promise<void>
  filterResult: <K extends keyof TFilters>(field: K, values: TFilters[K][]) => Promise<void>
  addFilter: <K extends keyof TFilters>(field: K, value: TFilters[K]) => Promise<void>
  removeFilter: <K extends keyof TFilters>(field: K, value?: TFilters[K]) => Promise<void>
  resetFilter: (field?: keyof TFilters & string) => Promise<void>
  resetSearch: () => Promise<void>
  reset: () => Promise<void> // Reset all state (search, filters, sorting)
}

// With explicit slug
const { page } = useFronticPage('demo-shop.com/uk/products/shoes')

// Disable redirect for manual handling
const { page, route } = useFronticPage(undefined, { redirectOn301: false })

if (route.value?.redirect) {
  navigateTo(route.value.redirect.path)
}

// Disable 404 throwing for custom error handling
const { page, route } = useFronticPage(undefined, { throwOn404: false })

if (route.value?.code === 404) {
  // Custom 404 handling
}

import type { Ref, ComputedRef, MaybeRef } from 'vue'

interface Page {
  id?: string
  slug?: string
  title?: string
  meta?: Record<string, unknown>
  data?: Record<string, unknown>
  route?: PageRoute
}

interface PageRoute {
  code?: number
  redirect?: { path: string }
  alternates?: AlternateRoute[]
  context?: { suggested?: string }
}

interface AlternateRoute {
  locale?: string
  lang?: string
  href: string
}

function useFronticPage(
  slug?: MaybeRef<string>,
  options?: {
    redirectOn301?: boolean
    throwOn404?: boolean
    contextKey?: MaybeRef<string | undefined>
    contextDomain?: MaybeRef<string | undefined>
    requestUrl?: MaybeRef<string | undefined>
    staleTime?: number
  }
): {
  page: Ref<Page | undefined>
  data: ComputedRef<Page['data'] | undefined>
  type: ComputedRef<string | undefined>
  block: ComputedRef<string | undefined>
  route: ComputedRef<PageRoute | undefined>
  alternates: ComputedRef<AlternateRoute[] | undefined>
  status: Ref<'pending' | 'error' | 'success'>
  refresh: () => Promise<void>
  refetch: () => Promise<void>
}

import type { Ref, Readonly } from 'vue'

interface Context {
  region: string
  locale: string
  scope: string
  token: string
}

interface ContextOption {
  region: string
  currency: string
  locales: Array<{ key: string; url: string }>
}

function useFronticContext(options?: { cookieName?: string; cookieMaxAge?: number; disableContext?: boolean }): {
  contexts: Readonly<Ref<ContextOption[]>>
  current: Readonly<Ref<Context | null>>
  token: Readonly<Ref<string | null>>
  update: (context: { region: string; locale: string }) => Promise<void>
  isLoading: Readonly<Ref<boolean>>
  refresh: () => Promise<void>
}

// Fetch page data
const page = await client.page('demo-shop.com/uk/products')

// Client with custom configuration
const directClient = useFronticClient({ proxy: false })
const customProxyClient = useFronticClient({ proxy: '/api/custom-frontic' })

import type { Blocks, Listings, ListingParameters, Responses } from '@frontic/stack/generated-types'

interface RequestOptions {
  requestUrl?: string
  contextKey?: string
  contextDomain?: string
  proxyUrl?: string
}

interface FrontstackClient {
  block: <T extends keyof Blocks>(name: T, key: string, config?: RequestOptions) => Promise<Responses[T]>
  listing: <T extends keyof Listings>(
    name: T,
    parameters: ListingParameters[T],
    config?: {
      query?: {
        filter?: Filter[]
        sort?: Sort | Sort[]
        search?: string
        limit?: number
        page?: number
      }
    } & RequestOptions
  ) => Promise<Responses[T]>
  page: (slug: string, config?: RequestOptions) => Promise<Page>
  context: (token: string, config?: RequestOptions) => Promise<Context>
  contextList: (token?: string, config?: RequestOptions) => Promise<[ContextOption[], string]>
  contextUpdate: (context: { region: string; locale: string }, token: string, config?: RequestOptions) => Promise<Context>
}

function useFronticClient(options?: { proxy?: boolean | string; contextDomain?: false | string; requestUrl?: false | string; secret?: string }): FrontstackClient