We Rebuilt Our Corporate Site with Nuxt.js, Contentful, and Firebase

As our team has grown, we felt it would be a bit sad to keep using a single-page site built with Bulma, so we rebuilt our corporate site with Nuxt.js + Contentful + Firebase (a bit late to the trend, admittedly).

For reference, here's what the old site looked like, lol. Built in 20-30 minutes, an ultra-simple setup with nothing but a logo 😇

The official docs cover how to do this, so there wasn't really anything I got stuck on.

Integrate Contentful with Nuxt.js – Contentful

One thing I did get stuck on: the official docs didn't make clear how to fetch entries by slug (you can fetch a Post by ID, but that's a random string and doesn't look great), so I referred to the article below.

Building a Modern-feeling SPA Blog Yourself (Contentful Edition)

The approach is to filter and fetch by slug, as shown below. If there's no post matching the slug, posts comes back empty, so you just need to handle that case!

      const posts = await client.getEntries({
        content_type: process.env.CTF_BLOG_POST_TYPE_ID,
        'fields.slug': slug,
      })

After that, with a bit of help from Firebase (Functions + Hosting), this corporate site was complete 🎉

Going forward, I'd like to use this space to share what we're building and talk about technical topics!

References

• Integrate Contentful with Nuxt.js – Contentful
• Building a Modern-feeling SPA Blog Yourself (Contentful Edition)