useContent

Learn how to fetch content using composables.

This composable fetches the content of a Slot, serving as the imperative equivalent of the <SlotContent> component.

Signature

This composable has the following signature:

function useContent<T extends SlotId>(    id: MaybeRefOrGetter<T>,    options?: MaybeRefOrGetter<UseContentOptions>,): UseContentResult<T>;

Where UseContentResult<T> is:

type UseContentResult<T> = {    data: ShallowRef<SlotContent<T> | undefined>;    metadata: ShallowRef<ContentMetadata | undefined>;    isLoading: Ref<boolean>;    error: Ref<Error | null>;};

Example

Here is an example of how to use this composable:

components/HomeHero.vue

<script setup>import {useContent} from '@croct/plug-vue';
const {data} = useContent('home-hero');</script>
<template>    <div v-if="data">        <strong>{{ data.title }}</strong>        <p>{{ data.subtitle }}</p>        <a :href="data.button.link">{{ data.button.label }}</a>    </div></template>

Parameters

id string

The ID of the slot to fetch.

You can specify the version of the slot by passing a versioned ID in the form id@version. For example, passing home-hero@1 will fetch the content for the home-hero slot in version 1. Not specifying a version number is the same as passing home-hero@latest, which will load the content for the latest version.

Best practice

Always specify a version to ensure the front end receives content with the expected structure despite future schema changes.

For more information, see Slot versioning.

options(optional) object

The fetch options. Accepts a MaybeRefOrGetter for reactivity.

initial(optional) JSON

An initial value to render while loading the actual content.

Auto-provided

If you are using the Croct CLI, you do not need to set an initial value unless you want to use a different one.

This value is required for server-side rendering. For client-side rendering, not specifying this value will cause the data ref to be undefined and isLoading to be true until the content is fetched.

fallback(optional) JSON

A fallback value to use in case of an error.

Auto-provided

If you are using the Croct CLI, you do not need to set a fallback unless you want to use a different one.

If not specified, the error ref will contain the error and data will remain undefined.

expiration(optional) number

The cache expiration time in milliseconds, extended on every render.

If negative, the cache never expires. By default, the cache expires after 60 seconds.

The SDK caches the result to prevent network requests on concurrent renders and re-renders.

Default:60000

cacheKey(optional) string

A unique key to identify the cache entry.

By default, the cache key is derived from the slot ID, locale, and attributes. You can specify a custom cache key to force re-fetching even if the other parameters are the same.

staleWhileLoading(optional) boolean

Whether to use the previous content while re-fetching the content.

By default, the composable sets data to undefined and isLoading to true while loading new content.

If this option is enabled, the behavior changes as follows:

On the first render, it either returns the initial content or sets isLoading to true while fetching.
If the cache key or any other property that affects the content changes, it returns the previous content while fetching the new content.
When the new content is available, it updates data with the new content.

Default:false

preferredLocale(optional) string

The locale code to fetch the content.

The code consists of a two-part string that specifies the language and, optionally, the country. For example, en represents English, en-us stands for English (United States), and pt-br for Portuguese (Brazil). It is case-insensitive and supports both hyphens and underscores as separators to accommodate the different conventions used by browsers, libraries, and other systems.

If no content is available in the preferred locale, the default locale content is returned instead.

Default:default locale

timeout(optional) number

The maximum fetch time in milliseconds.

Once reached, the SDK will abort the request and reject the promise with a timeout error.

attributes(optional) object

The map of attributes to inject in the evaluation context.

The attributes can be referenced in audience conditions using the context variable. For example, suppose you pass the following attributes:

{cities: ["New York", "San Francisco"]}

You can then reference them in queries like:

context's cities include location's cityName

For more information, see Context variables.

The following restrictions apply to the attributes:

Up to 30 entries and 5 levels deep
Keys can be either numbers or non-empty strings with a maximum length of 50 characters
Values can be null, numbers, booleans, strings (up to 50 characters), or nested maps
Nested maps follow the same constraints for keys and values

Return

The return is a reactive object with the following properties:

data ShallowRef<SlotContent<T>|undefined>: A shallow ref containing the slot content, or undefined while loading.
The type SlotContent<T> resolves to the content type of the given slot.
metadata ShallowRef<ContentMetadata|undefined>: A shallow ref containing the content metadata, or undefined while loading or if not available.
isLoading Ref<boolean>: A ref indicating whether the content is currently being fetched.
error Ref<Error|null>: A ref containing the error if the fetch failed, or null otherwise.