Want to get started with Nuxt and Contenful within minutes? Then this is the module for you, either you already have a project that needs a CMS for editorial content or you are creating a web application from scratch and want skip the plumbing for the CMS integration. The main feature of the module is to let you retrieve content from Contentful using the routes in Nuxt which will map to the slugs in Contentful. Let's see what you need to get up and running.
First of all if you don't have an account with Contentful, you need to setup it up and setup at least one content type with a slug field.
Setting up a new Nuxt project with Contentful
You can install Nuxt and the module separately, but if you want scaffold a working web site connected to Contentful I recommend that you run
npx create-nuxt-contentful-pages
...and you will get prompts for all the details needed and a simple website using Bootstrap setup for you.
Adding Contentful to an existing project
Add the module dependency to your project
npx nuxi@latest module add nuxt-contentful-pages
Add the environment variables for Contentful
CONTENTFUL_SPACE_ID=....
CONTENTFUL_ACCESS_TOKEN=...
Then you are pretty much setup to use any of the module's composables to retrieve content from the CMS.
Composables
useFetchContentfulEntryBySlug
This composable will fetch a Contentful entry by its slug and content type. This is the most straight forward composable to use when you want to build a web site that retrieves content (pages) using the path as key.
Parameters:
contentType(string): The type of content you want to retrieve.
slug(string, optional): The slug of the entry. If not provided, the slug will be derived from the current route parameters.
This composable returns a promise that resolves to the entry of the specified type or null if the entry is not found.
useFetchContentfulEntryById
This composable will fetch a specific entry from Contentful using its entry ID.
Parameters:
entryId(string): The unique ID of the Contentful entry you want to fetch.
This composable returns a promise that resolves to the entry of the specified type or null if the entry is not found.
useFetchContentfulEntries
This composable will fetch entries from Contentful, allowing you to retrieve content based on the specified content type and optional filters.
Parameters:
contentType(string): The Contentful content type you want to fetch.
offset(number, default: 0): The number of entries to skip, useful for pagination.
limit(number, default: 20): The maximum number of entries to fetch in one call.
filterParams(Record<string, string>[] | undefined): Optional. An array of key-value pairs to filter the entries by specific fields.
This composable returns a promise that resolves to an array of entries.
useFetchContentfulEntriesRaw
This composable will fetch entries from Contentful, returning the raw response data for more granular control over the response.
Parameters:
contentType(string): The type of content you want to retrieve from Contentful.
offset(number, default: 0): The number of entries to skip, often used for pagination.
limit(number, default: 20): The maximum number of entries to return.
filterParams(Record<string, string>[] | undefined): Optional. Key-value pairs to filter the entries by specific fields.
useFetchContentfulEntryBySlugUntyped
This composable will fetch a Contentful entry by its slug without specifying a type for the returned data.
Parameters:
contentType(string): The content type of the entry you want to retrieve.
The composable derives the slug from the route parameters or defaults to index if no slug is present. It returns a promise that resolves to the entry data fetched by the given slug.