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?: string;
fetchOptions?: AsyncDataOptions<T>;
},
): AsyncData<T, NuxtError>
API Reference
Params
options.uri
string
The URI of the page to fetch
options.fetchOptions
AsyncDataOptions<T>
AsyncData options.
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.