Building Blog with Nuxt 2 and Contentrain Headless CMS

jacobandrewsky

Jakub Andrzejewski

Posted on June 13, 2022

Building Blog with Nuxt 2 and Contentrain Headless CMS

When I first heard about Contentrain I was a bit sceptical. At this time I already had experiences with several Content Management Systems like Storyblok, Contentful, and Contentstack, so wasn't particularly sure how Contentrain will differ from them. Basically, what will make me wanna use Contentrain instead of these already known solutions.

I thought it will be just another tool that offers exactly same functionality.

Thorin-Bilbo

My experience with Contentrain was really, really good. It was so great that I decided to write an article about it 🚀

Contentrain Dashboard

The first step when you create a new account in Contentrain will be this nice looking dashboard with a short tutorial on what you can do with Contentrain

Contentrain Dashboard

The first step we will do, we will create a new project. Projects are like a main entitites in Contentrain.

Contentrain Projects

We will click Start new project button and choose both GitHub and Nuxt.js. It will allow us to connect our GitHub account that will be used to create repository and publish changes to it. Second step, we have selected a Nuxt.js blog template.

Contentrain Create Project

GitHub will ask you for permissions. Make sure to authorize Contentrain.

GitHub Permissions

Configuration

The first step would be to configure GitHub and the storage.

Contentrain configuration

When you click GitHub settings it will ask you for authorizing access to all repositories. Make sure to click Install & Authorize. This will allow us to move to the second step.

Github Permissions

The second step here is to define roles. We will skip it for now as the current roles will suit us well.

Contentrain Roles

The third and final step is to create content. In here you can add new content in JSON format that will be then used in your application.

Contentrain content

Contentrain Project Dashboard

After we have successfuly created a new project it can be accessed in our dashboard.

Contenrain Project Dashboard

From here, you can easily modify content to meet your needs best.

Modifying content in Contenrain

Code

Contentrain generated a new repository for us with a Nuxt Blog template.

Nuxt template repo from Contentrain

We can then deploy this blog template to our favourite hosting provider. In my case, it will be Vercel.

Vercel configuration

As a result, we will have the following application hosted on the Vercel cloud.

Nuxt Contentrain on Vercel

Changing content

It is not only about displaying content. We can also modify it in Contentrain.

Lets modify the value of the Hero component.

Contenrain modify content

After this change, what will happen is it will automatically push a new value to our code repository (updated JSON file).

Thanks to the fact, that I have connected my repository to Vercel, all pushed code to the master branch will automatically trigger a redeploy.

We can observe the new content in our deployed application.

Nuxt Contentrain on Vercel

Summary

Well done! You have just created a simple Nuxt 2 Blog with Contentrain. Thanks to the hosting on Vercel, changes can be applied to the production website in a blink of an eye! Keep in mind that this is just the beginning of what Contentrain has to offer. Make sure to take it for a spin and start building!

💖 💪 🙅 🚩
jacobandrewsky
Jakub Andrzejewski

Posted on June 13, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related