Starting a New Nuxt Project

Open your terminal and run this command. Make sure you have npx installed (shipped by default with npm +5.2.0).

$ npx create-nuxt-app vue-nuxt-prismic-blog

The Nuxt installer conveniently asks us for our preferences and creates the project.

We should end up with a project structure like below:

Nuxt project structure

Let’s build our blog now. We need to fetch the blog content from Prismic. Luckily, Prismic gives us plenty of handy tools.

Installing the Prismic JavaSCript packages

The prismic-javascript package includes many utilities, including fetching from our API. The prismic-dom gives us helper functions to render markup.

Prismic NPM package — https://www.npmjs.com/package/prismic-javascript

Let’s create the prismic.config.js file in our root directory. This is where we’ll place our Prismic related configuration.

prismic.config.js

Note: Make sure you use the API endpoint associated with your blog.

Open the pages/index.vue file and import the Prismic library with our config.

pages/index.vue

First, we initialize our API with the endpoint. Then, we query the API to return our blog post. We can specify the language and document type.

The Prismic API is promise based, which means we can call the API and chain promises. Hurray for promises. We can also use the async/await syntax to resolve promises.

Prismic response

All we need to do is render the markup now.

There you go. We’ve successfully fetched our blog post from the Prismic API.

To apply the styles — grab a copy and place it in the style section of the Vue component:

If we open our app, this is what we should see.

End result

Voilà! We have a modern server-side rendered blog, built with Nuxt and Prismic.

We barely scratched the surface. We can do a lot more with Nuxt and Prismic. My favorite Prismic features are Slices and Live Preview. I encourage you to check them out!

Slices will allow you to create dynamic pages with richer content, and Live preview will allow you to instantly preview your edits on your webpage.

For example, in this project, we worked on only one post. If we had created lots of posts in Prismic, however, then one really great thing about Nuxt.js is that it automatically creates routes for you.

Behind the scenes, it still uses Vue Router for this, but you don’t need to create a route config manually anymore. Instead, you create your routing using a folder structure — inside the pages folder. But you can read all about that in the official docs on routing in Nuxt.js.

If you’re thinking about launching your blog, the “Master Content Strategy” book helped me tremendously with putting together a solid blogging strategy.

Thanks for reading!

Here’s the repository for our blog: