How to create an SEO blog using Nuxt.js and Contentful

The Nuxt.js framework and Contentful can be used to quickly create sophisticated and efficient blogs. Nuxt.js, developed over the VueJS platform, provides server-side rendering, which gives bloggers access to valuable SEO content.

Before getting started on creating the blog itself, it is very important to set up these platforms for a programmer/blogger. This article breaks down the setup for both the Nuxt.js project and Contentful, and outlines the necessary steps in fetching Contentful data to the Nuxt.js project.

Why a Nuxt.js and Contentful SEO blog?

Nuxt.js is a meta-framework built over Vue.js and is great for building server-side rendered Vue.js applications. It automatically generates a Vue router configuration to shorten the lengthy router config file in Vue. It also allows us to add configurations in the Config file to resolve the standard configuration in Vue.js.
Vue applications are slow to load. Its framework behaviors are difficult to change. Nuxt.js overcomes all these complexities in Vue.js applications. It offers various out of the box features and a decent performance level.

Contentful is a content infrastructure platform where content can be generated, organized and allocated to any platform. Besides this, it offers the freedom to create your own content model. Final products are delivered much faster, as developers and editors work simultaneously.

The use of powerful APIs along with top-notch documentation and samples helps build prototypes faster and more easily. It was created to help professional developers create programmable content, overcoming the drawbacks of CMSes that are designed to manage page-centric websites.

SEO-optimized blogs

Blogs are often written with SEO keywords in mind so that their content jumps to the top of search results. A special algorithm scans every word, title and link, as well as the reputation of the website, to deduce the search results required by the user. The blogs that fit this algorithm best are ranked higher in search results. The algorithm is frequently modified, focusing on criteria like localization, page authority and click-through rate, as well as search via voice assistants.

Nuxt.js makes server-side rendering easier due to its inbuilt modules and helps to create better SEO content. The routes are automatically handled. Contentful enables users to integrate with any framework in a multi-channel network. Content teams can create intuitive, simple content and increase the efficiency of production.

Integration of these advanced tools and frameworks allows bloggers to create search engine-optimized blogs which will appear closer to the top of searches. Step one is to set up a Nuxt.js project with Contentful. Afterward, Contentful data is fetched via the API and sent to the Nuxt template.

Set up Nuxt.js using Vue-CLI

Vue CLI is required to begin with Nuxt.js. Its architecture and commands are similar to the Vue CLI.

To install Vue CLI, you need the Node Package Manager, which can be easily downloaded from Node.js’s official site.

Use the following command to install NPM:

npm install -g vue-cli

After the CLI is installed, use the following commands to initialize the application with the Nuxt starter template:

Launch your project

npm run dev

Now, the Nuxt logo will appear in your browser along with the title of your project and the description you entered in the CLI setup.

Set up Contentful using the Contentful CLI

Before integrating the Contentful API with different platforms, you will need to set up space, create a content model and fill it with some data.

While you can set up the Contentful space manually, you can also use Contentful’s command line interface to create a content space and fill it with data.

The contentful-CLI can be installed using NPM:

npm i -g contentful-cli

With the CLI available to you, you now have to authorize it through the Contentful login. This command will open a new browser window through which you can create a new account or login and then retrieve a new access token.

contentful login

Now you can create a space:

contentful space create --name 'Nuxt with Contentful tutorial'

The created space is filled with content. The CLI tool will show you the space ID, which you will need in a second.

To transfer content between spaces, you can use the Contentful space export and Contentful space import commands from the Contentful CLI.

Then, use seed with a defined –space-id flag:

Now you can import some data to Contentful:

The new space now has a content model, including ‘author’ and ‘blog post’ content types.

The last step is to create a Content Delivery API access token. You can do this using the web app or also via the CLI.

Set up Nuxt.js with Contentful

The project above only has the root indexes available defined as ./pages/index.vue. To make it use Contentful we have to do two things:

1. Register the Contentful JavaScript CDA SDK

2. Fetch data in the index.vue page component

Step one: Register the Contentful JavaScript CDA SDK

Contentful is easily integrated as a module in Nuxt project using the Contentful SDK. The command for it is:

npm install --save contentful

Nuxt.js provides a plugin directory to make the custom code available on the server (static pre-rendering and client-side dynamic re-rendering). Here, the JavaScript SDK is based on Axios, which makes it possible to use it in the Node.js and browser context.

To use it, create a new file in the plugins directory called contentful.js.

Now you have to define the environment variables. To avoid the need for setting all the environment variables in the CLI when running e.g. npm run dev you can set up a new config file called .contentful.json. This file includes the needed configuration:

• Entry ID of the person (the blog author)

• Content type ID of blog posts to fetch the post data

• Your space ID

• The content delivery access token

In the nuxt.config.js you can then require the config file and make it available in the plugin file through the env property.

Step two: Fetch data in the index.vue page component

Nuxt.js conventions define which pages and routes should be available. The example template already created the file ./pages/index.vue for you.

In Nuxt.js you can define asynchronous data for every page component. There is fetching of data during build time and later before every page navigation.

These few lines will import the Contentful plugin you just wrote and create a new SDK client. Nuxt.js also provides shorthands for the plugin directory, which makes it really easy to import our Contentful plugin (~/plugins/contentful.js).

For production, you can run npm run generate to statically generate the pages.

The results of the page are:
Index.vue

When you click on the title of the posts, it routes to the following pages:

Blog.vue pages

This was a quick walkthrough what you can achieve in just five minutes with Nuxt.js and Contentful.

Using the method outlined above, you can create a universal JavaScript application quickly without much operational overhead. You can simply build the stack and then push it to your CDN of choice. The above steps will help to create easy, efficient and SEO friendly blogs.

For an in-depth walkthrough on optimizing SEO with Contentful, please refer to this guide.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.