🏡 Home

Setup Contentful for a simple Blog

Posted 2 years ago
Return to overview

When you register for a free tier account at Contentful, just skip the tutorial and opt for an empty space.

First we're going to create a Tags type

We'll connect this content type to "Articles" later. Go to the Content Model and Add a new Content Type.

For the Name field, input "Tags" (this will generate the API identifier). You'll now be prompted to add some fields. Add the following fields:

  • A field with the type "Text", Name "Title". For the Create and Configure step, use this configuration: Settings: Check the checkbox "This fields represents the Entry title" Validation: Check the checkbox for "Required field" Click "Confirm"

  • A field with the type "Text", Name "Slug". For the Create and Configure step, use this configuration: Validation: Check the checkbox for "Unique field" Appearance: "Slug" Click "Confirm"

Now let's create Pages!

Go to the Content Model and Add a new Content Type. Use the following settings (feel free to add more fields if you like, just beware that we're counting on specific fields to be present):

For the Name field, input "Page" (this will generate the API identifier). You'll now be prompted to add some fields. Add the following fields:

  • A field with the type "Text", Name "Title". For the Create and Configure step, use this configuration: Settings: Check the checkbox "This fields represents the Entry title" Validation: Check the checkbox for "Required field" Click "Confirm"

  • A field with the type "Text", Name "Slug". For the Create and Configure step, use this configuration: Validation: Check the checkbox for "Unique field" Appearance: "Slug" Click "Confirm"

  • A field with the type "Media", Name "Hero Image". For the Create and Configure step, use this configuration: Validation: Check the checkbox for "Accept only specified file types", then select "Image" Click "Confirm"

  • A field with the type "Rich text", Name "Body". For the Create and Configure step, configure to your own leisure (linking to entries or assets is not explicitly covered in this tutorial) Click "Confirm"

These are the basics to Pages. 🙌

Let's add one more content type: Articles!

We can do it manually, but we can also open up the newly created Pages content type and choose "Duplicate" on the "Actions" menu. This way, we only have to input the new content Name: "Post". Then go to the duplicated content type to finish the configuration.

Let's add one more field to allow us to link articles based on a common tag.

  • A field with the type "Reference", Name "Tags". For the Create and Configure step, use this configuration: Validation: Check the checkbox for "Accept only specified entry type", then select "Tags" Click "Confirm"

You're done with modelling the content.

Adding some content

Now we're going to need to add at least a couple of pages, articles and tags so we can read them from the Nuxt application later.

Add the following Pages:

  • A page with the slug "home"

  • A page with the slug "about"

  • Three or more articles (be creative)

  • Two or more articles need to have a common tag

Public access

In order to be able to read from the content you need to generate a public API key. Navigate to the Settings and find the API keys menu. Add a new key and note the following two properties:

  • Space ID

  • Content Delivery API - access token

Now, open your Nuxt project and create a file called `.env` and add the following contents:

CONTENTFUL_SPACE_ID=m1tzgj3kf3jo CONTENTFUL_ACCESS_TOKEN=8YvcR4jlu-JIibld91jWPuqjSL4TOVqlvZtgVDZ6G2oz

💡 These are dummy values, I just randomly generated strings that resemble what comes out of Contentful. While you don't have write access to Contentful, it's good practice to keep this sort of keys hidden and secret.

The last thing that we'll do is to make sure that Nuxt has access to the keys at runtime. For that, open the `nuxt.config.ts` and insert the following object as property of the `runtimeConfig` property:

import { defineNuxtConfig } from'nuxt' exportdefaultdefineNuxtConfig({ // if you want to use server-side rendering (SSR) ssr:true, // target: 'server', // if you want to use static HTML generation (SSG) target:'static', typescript: { shim:false, }, css: ["@/assets/css/styles.css"], plugins: [], generate: {routes: ['/404','/bio']}, runtimeConfig: { private: { CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN, }, // ...Abbreviated here for the sake of readability })

That's enough for now. We have a barebones Nuxt 3 application and some content in Contentful. Next up, we're going to make sure that Nuxt can read into Contentful.

Return to overview