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 FronticClient {
  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;
}): FronticClient;