The Power of Contentful and Nuxt JS

If you've checked out this blog before, it'll be no surprise that I'm a huge proponent of the JAMstack architecture philosophy. I started off as a front-end developer and picked up some of the backend out of necessity. The support of the Craft CMS community in getting ramped up with PHP, Twig, and Yii has been amazing; I even have my own open-source plugin, Craft User Manual.

However, there are times when we don't have the luxury or the budget of spinning up our own server to host a dedicated content management system like Craft, WordPress, or Drupal. Luckily, there are headless options out there that are hosted in the cloud-like Contentful.

Headless Architecture with Contentful

Content can be managed in Contentful and then exposed via an API. Your frontend framework, like Nuxt, a static-site generator that uses Vue, can then consume that API and populate the view with data. This can be a huge win for many reasons: 

1. the site is incredibly secure because there is no database, 
2. the site is extremely fast because there are minimal requests, and 
3. there are no dependencies or hardware updates that need to happen.

There are a few shortcomings though

One of the things that I love about Craft is their Live Preview feature. As a content editor works on an entry they can preview their work-in-progress draft. Such a feature isn't possible out of the box with the JAMstack. A little elbow grease needs to be applied to tell the two to talk to each other without needing to redeploy the entire application in order to visually see what changes you are making.

Contentful Previews

Luckily, there is a feature for this in Contentful called Content Previews where you can set up unique preview URLs for each of our Content's data models.

1. To set up Contentful Previews in Contentful, login and click on the Settings in the top menu, and under Space Settings, select the Content Preview option.
2. Once in the Content Preview section, click on "+ Add content preview"
3. Enter in the unique name of your preview, like "Article Preview" or "Page Preview". Additionally, add in a description if you are going to have lots of previews.
4. Next set up which Content types should get the ability to have previews. You may want certain entry types like Pages to have previews, but not other entry types, like blocks or supporting content types. Check off the checkbox for that content type and input will appear. In this input put in your staging environment URL for whatever the page URL would be followed by the slug variable and a query parameter (more on that in a bit). For instance, if you have a blog and your URL is usually, enter in website.com/blog/article your preview URL would be website.com/blog/{entry_field.slug}?preview=true. {entry_field.slug} is a dynamic var that Contentful will always populate. When ?preview=true is present, that will tell Nuxt to rehydrate itself from your API, instead of just the static HTML that was rendered on deployment.

* Previews are also listed out in Contentful.

Setting up Nuxt to allow previews

Similar to Contentful, Nuxt doesn't support previews out of the box. There are two things that need to be set up in order to tell Nuxt to look out for previews.

The Nuxt Preview Plugin

1. Create a new file in the plugins directory called preview.client.js and drop this inside of it

Now that we have this plugin file, we need to tell Nuxt to load it in. Because it is named .client.js it will only load on the client. In your nuxt.config.js file drop this into your plugins

* Previews are also outlined in Nuxt's documentation.

Wrapping up Contentful Previews with Nuxt

And that should be it! Contentful and Nuxt should now update on your local install, as well as your staging environment when the query parameter (?preview=true) is present. This should make it much easier working with a larger team when you have none-technical or developer folks managing your content in Contentful. They can plug away at changes, click "Open preview" and they should be off to the races!

Are you working on a Contentful, Nuxt, or just a new JAMstack/headless experience and looking for some help or a new partner? I'd love to help out!