How to Build a Blog with Nuxt.js and Contentful

Posted on by Panther

In this tutorial, we will learn how to build a blog using Nuxt.js and Contentful. Nuxt.js is a powerful framework for building Vue.js applications, and Contentful is a flexible and scalable content management system (CMS) that allows you to manage and deliver content across multiple platforms.

By the end of this tutorial, you will have a fully functional blog with a dynamic list of blog posts and individual blog post pages. Let’s get started!

Prerequisites

To follow along with this tutorial, you will need the following:

  • Basic knowledge of JavaScript and Vue.js
  • Node.js installed on your local machine
  • Basic knowledge of terminal commands

Step 1: Set Up a Nuxt.js Project

To start, let’s create a new Nuxt.js project. Open your terminal and navigate to your desired project directory. Run the following command:

npx create-nuxt-app blog

This will prompt you to answer a few questions to generate the project. Choose the default options for now.

Once the project is generated, navigate into the project directory:

cd blog

Now, start the development server:

npm run dev

You should see the Nuxt.js logo and a message saying “Nuxt.js is listening on http://localhost:3000”. Open your browser and navigate to `http://localhost:3000` to see your Nuxt.js app in action.

Step 2: Set Up Contentful

Next, we need to set up a Contentful account and create a new space for our blog.

  1. Go to Contentful and sign up for a new account. Once signed in, you will be taken to the Contentful dashboard.

  2. Click on “Create Empty Space”, give your space a name (e.g., “My Blog”), and select a region. Click on “Create Space” to create the space.

  3. Once the space is created, you will be taken to the space dashboard. From the sidebar, click on “Content model” and then click on “Add content type”.

  4. Create a content type called “Blog Post” with the following fields:

    • Title (Text field)
    • Slug (Text field)
    • Date (Date and time field)
    • Body (Rich text field)

    Ensure that “Slug” is set as the “Field ID” for this content type.

  5. Click on “Publish” to publish the content model.

  6. Now that our content model is set up, let’s create some sample blog posts. From the sidebar, click on “Content” and then “Add blog post”. Enter a title, slug, date, and body content for each blog post. Repeat this step to create multiple blog posts.

  7. Once you have created some sample blog posts, click on “Publish” to publish the posts.

  8. Finally, we need to obtain the API keys required to access our Contentful data. From the sidebar, click on “Settings” and then “API keys”. Copy the “Space ID” and “Content Delivery API – access token” values.

Step 3: Set Up Contentful Integration

Now that we have our Nuxt.js project and Contentful space set up, let’s integrate them together.

  1. In your project directory, open the nuxt.config.js file. We need to install and configure the @nuxt/content module to fetch data from Contentful.

  2. Install the required dependencies by running the following command in your terminal:

npm install @nuxt/contentful --save
  1. In the nuxt.config.js file, add the following code inside the modules array:
['@nuxt/content']
  1. Add the following code block at the end of the nuxt.config.js file to configure the @nuxt/content module:
content: {
  markdown: {
    prism: {
      theme: 'prismjs/themes/prism-tomorrow.css'
    }
  },
  fullTextSearchFields: ['title', 'slug'],
  api: {
    base: 'https://cdn.contentful.com',
    space: '<YOUR_SPACE_ID>',
    accessToken: '<YOUR_CONTENT_DELIVERY_API_ACCESS_TOKEN>'
  }
}

Replace <YOUR_SPACE_ID> and <YOUR_CONTENT_DELIVERY_API_ACCESS_TOKEN> with the values you obtained from the Contentful dashboard.

  1. Restart the development server by stopping the running process and running npm run dev again.

Step 4: Fetch Blog Posts

Now that our Contentful integration is set up, let’s fetch the blog posts from Contentful and display them on the blog homepage.

  1. In your project directory, open the pages/index.vue file.

  2. Replace the existing content inside the <template> tag with the following code:

<template>
  <div>
    <h1>Welcome to My Blog!</h1>
    <div v-for="post in blogPosts" :key="post.sys.id">
      <h2>{{ post.fields.title }}</h2>
      {{ formatDate(post.fields.date) }}
      <nuxt-link :to="`/blog/${post.fields.slug}`">Read More</nuxt-link>
    </div>
  </div>
</template>
  1. In the <script> tag, add the following code:
export default {
  async asyncData({ $content }) {
    const blogPosts = await $content('blogPost').fetch()

    return { blogPosts }
  },

  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date).toLocaleDateString(undefined, options)
    }
  }
}
  1. Save the changes and refresh the browser. You should now see the list of blog posts fetched from Contentful on the homepage.

Step 5: Generate Dynamic Blog Post Pages

Next, let’s generate dynamic individual blog post pages based on the slugs of the blog posts.

  1. In your project directory, create a new directory called blog inside the pages directory.

  2. Inside the blog directory, create a new file called _slug.vue.

  3. Replace the existing content inside the _slug.vue file with the following code:

<template>
  <div>
    <h1>{{ blogPost.fields.title }}</h1>
    <p>Published on {{ formatDate(blogPost.fields.date) }}</p>
    <div v-html="blogPost.fields.body"></div>
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const blogPost = await $content('blogPost').where({ fields: { slug: params.slug } }).fetch()

    return { blogPost: blogPost[0] }
  },

  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date).toLocaleDateString(undefined, options)
    }
  }
}
</script>
  1. Save the changes and navigate to any blog post page (e.g., http://localhost:3000/blog/<YOUR_BLOG_POST_SLUG>). You should see the individual blog post page with the content fetched from Contentful.

Congratulations! You have successfully built a blog using Nuxt.js and Contentful. You can now create and manage blog posts in Contentful and they will be dynamically rendered on your blog.

Conclusion

In this tutorial, we learned how to set up a Nuxt.js project, integrate it with Contentful, fetch and display blog posts from Contentful, and generate dynamic individual blog post pages. Nuxt.js and Contentful make it easy to manage and deliver content for your blog, allowing you to focus on creating engaging content for your readers.

Feel free to explore more features of Nuxt.js and Contentful to enhance your blog.

Related Post