How to create a blog with Nuxt.js and Prismic

Building a blog doesn't have to be complicated. By combining Nuxt.js with Prismic CMS, you can create a powerful, performant blog with excellent content management capabilities.

Why Nuxt.js and Prismic?

Nuxt.js

• Vue-based framework with excellent developer experience
• Automatic code splitting and optimization
• Server-side rendering for better SEO
• Static site generation capabilities

Prismic

• Headless CMS with an intuitive interface
• Content modeling with custom types
• Built-in image optimization
• API-first approach

Getting Started

1. Set Up Nuxt.js

npx create-nuxt-app my-blog
cd my-blog

2. Install Prismic

npm install @nuxtjs/prismic

3. Configure Prismic

Add Prismic to your nuxt.config.js:

export default {
  modules: [
    '@nuxtjs/prismic'
  ],

  prismic: {
    endpoint: 'https://your-repo-name.prismic.io/api/v2',
    apiOptions: {
      routes: [
        {
          type: 'blog_post',
          path: '/blog/:uid',
        },
      ],
    },
  },
}

Creating Content Types

In Prismic, define your blog post structure:

• Title (Key Text)
• Date (Date)
• Author (Key Text)
• Featured Image (Image)
• Content (Rich Text)

Building the Blog List Page

<template>
  <div class="blog-list">
    <article v-for="post in posts" :key="post.id" class="post-preview">
      <nuxt-link :to="`/blog/${post.uid}`">
        <img :src="post.data.featured_image.url" :alt="post.data.title" />
        <h2>{{ post.data.title }}</h2>
        <p>{{ post.data.excerpt }}</p>
      </nuxt-link>
    </article>
  </div>
</template>

<script>
export default {
  async asyncData({ $prismic }) {
    const posts = await $prismic.api.query(
      $prismic.predicates.at('document.type', 'blog_post'),
      { orderings: '[document.first_publication_date desc]' }
    )

    return { posts: posts.results }
  }
}
</script>

Creating Individual Blog Posts

Create a dynamic route at pages/blog/_uid.vue:

<template>
  <article class="blog-post">
    <h1>{{ post.data.title }}</h1>
    <time>{{ post.data.date }}</time>
    <prismic-rich-text :field="post.data.content" />
  </article>
</template>

<script>
export default {
  async asyncData({ $prismic, params }) {
    const post = await $prismic.api.getByUID('blog_post', params.uid)
    return { post }
  }
}
</script>

Conclusion

Nuxt.js combined with Prismic provides a powerful solution for building modern blogs. You get the performance benefits of static site generation with the flexibility of a headless CMS, making content updates easy without touching code.