How To Create a Blazing Fast Modern Blog With Nuxt and Prismic

Let’s build a modern blog with Vue, Nuxt, and Prismic

Let’s build a modern blog with Vue, Nuxt, and Prismic.

I chose Vue and Nuxt because they’re fun to work with. They’re easy to start with, offer plenty of essential features out of the box, and provide good performance.

Nuxt is a Vue framework for server-side rendering. It’s a tool in the Vue ecosystem, that you can use to build server-rendered apps from scratch, without being bothered by the underlying complexities of rendering a JavaScript app to a server.

Why Nuxt?

Nuxt.js is an implementation of what we call a universal application.

It became famous with React, but is currently getting more and more popular for many client-side libraries, such as Angular, Vue.js, etc.

A universal application is a kind of application that renders your component on the server-side.

Nuxt.js offers a simple way to first retrieve your asynchronous data from any data source, and then render it and send it to the browser as HTML.

In terms of SEO, the Google bot crawler will get the rendered content and indexes it properly. In addition to that, the fact that your content can be pre-rendered, and ready to be served, increases the speed of your website. In that way, it also improves your SEO.

The Nuxt ecosystem is a never-ending stream of handy tools and packages.

Fast Rendering Ensured by Virtual DOM and Minimal Load Time

Vue.js is only ~30 KB gzipped with the core module, the router and Vuex.

A minimal footprint offers short load time, meaning higher speed for users and better ranking on the speed criterium for the Google crawler.

Virtual DOM

Vue.js also took inspiration from ReactJS, by implementing a virtual DOM under the hood since version 2.0. A virtual DOM is basically a way to generate a version of the DOM in memory, each time you change a state and compare it to the actual DOM, so you can update only the part that needs to be updated instead of re-rendering everything.

Benchmarking

Vue.js offers some really good overall performance, as you can see on the following benchmarks:

Duration in milliseconds ± standard deviation (Slowdown = Duration).

Memory allocation in MB.

What Is Prismic and Why Is It Relevant?

Prismic is a headless CMS. This means you edit your templates on your own server, but the back end runs on the cloud. This presents a few advantages such as being able to use an API to feed your content into external apps.

Imagine that you built a blog, not for yourself, but for someone else who is not a developer, so they can edit their content. You want to have full control over the layout (built with Vue), but you don’t want to go over the tedious process of deploying, every time a new file for a new blog post is created.

This is where including a headless content management system (CMS) into your app is useful — so you don’t have to deal with that.

The Difference Between a Headless CMS and Vanilla CMS

A traditional CMS like Wordpress would provide the editing tools for managing content. But, it also would assume full control of the front end of your website. The way the content is displayed is largely defined in a CMS.

Headless content management systems, or headless CMS, are a back end only content management system, built from the ground up as a content repository, that makes content accessible via a RESTful API, for display on any device.

I chose Prismic as my headless CMS — it’s super simple to set up and has great features out of the box.

Why I Chose Prismic

Start Setting Up Prismic

Head over to the Prismic website and create a new user.

After creating a new user on Prismic, we should see something like this:

Custom Types are models of content that we setup for our marketing or writing team. The marketing team will fill them with content (text, images, etc.), and we’ll be able to retrieve this content through Prismic’s API.

There are two kinds of Custom Types — the Single Type and the Repeatable Type.

  • The Single Type is used for pages where there is only one instance (a home page, a pricing page, an about us page).
  • Repeatable Custom Types are templates, used in more than one document (ie. blog post pages, product pages, landing pages for your website).

We want a blog post. In fact we want many blog posts, so it should be a Repeatable Type.

Creating a Repeatable Type Blog Post

We should be in the content builder now. Prismic gives us a lot of options to choose from. If you look on the right, you should see a sidebar with lots of options — images, titles, content related, and SEO options.

Let’s build a reusable blog post with the Prismic builder. Our blog will include a title and a body.

Start by adding the following fields:

  • UID field
  • Title field
  • Rich text field

Each time you add a field you can define formatting options for it. The UID field is a unique identifier that can be used specifically to create SEO and user-friendly website URLs.

Don’t forget to save our progress!

Make sure you have the following fields for the blog post:

  • uid
  • blog_post_title
  • blog_content

So far, we have the layout for our reusable blog post.

Starting a New Nuxt Project

Thanks for reading!

Resources