useStatamicPage
A composable for fetching Statamic page data.
Added since: v1.0.0
Last changed:
Usage
The useStatamicPage composable is used to fetch Statamic page data.
Fetching the correct page is done by fetching the entry with the same URI as the current route. The URI is derived from the useStatamicPageUri composable.
This composable will also set the page state (useState) whenever the page data is fetched.
You can optionally pass a custom URI to the composable to fetch a different page.
Basic example
Do note that we also use the
useStatamicPageErrorHandler composable to handle the error.pages/[...slug].vue
<script setup lang="ts">
const { data, error } = await useStatamicPage();
useStatamicPageErrorHandler(error);
</script>
Type Definition
function useStatamicPage<
T extends Record<string, any> = StatamicApiEntryDefaultFields,
>(
options: {
uri?: MaybeRefOrGetter<string>;
params?: Partial<Omit<StatamicApiParamsUri<T>, "uri">>;
fetchOptions?: Omit<FetchOptions, "params">;
asyncDataOptions?: AsyncDataOptions<T>;
} = {
params: {},
fetchOptions: {},
asyncDataOptions: {},
},
): AsyncData<T, NuxtError>
API Reference
Params
options.uri
MaybeRefOrGetter<string>
The Statamic page URI to retrieve the data for. Defaults to the current route’s URI if omitted.
options.params
Partial<Omit<StatamicApiParamsUri<T>, 'uri'>>
Additional parameters for fetching an entry by its URI path.
options.fetchOptions
Omit<FetchOptions, 'params'>
Options passed to the Statamic API fetch instance.
options.asyncDataOptions
AsyncDataOptions<T>
Options passed to the
useAsyncData composable.Return Value
AsyncData<T, NuxtError>
Returns a fully configured
useAsyncData composable.Will throw a 404 error if the page is not found, this needs to be handled by the
useStatamicPageErrorHandlercomposable afterwards.