Prismic & Nuxt 3: A Dynamic Web Development Duo

When it comes to developing a high-performance, SEO-friendly website with a robust CMS, combining Nuxt 3 and Prismic is a standout choice. Nuxt 3, the latest iteration of the popular Vue framework, focuses on performance, server-side rendering, and developer-friendly configurations. Prismic, on the other hand, is a headless CMS that excels at delivering flexible content management capabilities, particularly for dynamic sites. In this article, we'll explore the benefits and drawbacks of using Prismic with Nuxt 3, along with examples to illustrate how they work together to create a content-rich, performant website.

Why Use Nuxt 3 with Prismic?

Nuxt 3 enables server-side rendering, enhancing load times and SEO by delivering fully rendered pages to users. Prismic complements this by decoupling content management from the frontend, allowing content teams to independently handle updates. This combination is especially useful for blogs, landing pages, and dynamic websites that require regular content updates.

Integrating Prismic with Nuxt 3 brings additional benefits:

Server-Side Rendering (SSR): Nuxt 3’s SSR capabilities ensure fast load times and better SEO, and Prismic’s content API integrates seamlessly, making it easy to load content quickly.
Dynamic Content Management: Prismic’s headless approach lets content teams manage updates without developer support, keeping content fresh without impacting code.
SEO Optimization: Nuxt 3’s SEO features, paired with Prismic’s flexible API, provide control over essential SEO elements like meta tags and canonical URLs.
Flexible Content Modeling: Prismic’s custom types and slice machine offer a modular approach to content design, allowing editors to mix and match components for a dynamic experience.
Improved Development Workflow: Nuxt 3’s file-based routing simplifies structure, while Prismic’s API-based CMS keeps content separate from code, enabling cleaner, modular development.
Preview Mode and Drafting: Prismic’s preview mode and Nuxt 3’s SSR let content teams see content changes in real-time before publishing, making content updates seamless.

Potential Drawbacks

Using Prismic with Nuxt 3 offers many advantages, but there are a few potential challenges to consider:

Dependency on External API: Since Prismic is a cloud CMS, it relies on server uptime and network connection. If Prismic’s servers experience downtime, content delivery may be impacted unless caching is in place.
Limited Offline Access: As a cloud service, Prismic requires internet access to fetch content. This can be limiting for local development without network access.
Complex Customization: For highly custom content structures, Prismic may require additional development, which can complicate setup and offset the simplicity of a headless CMS.
API Rate Limits: Larger applications or sites with high traffic may encounter API rate limits. Prismic offers plans with different limits, but high traffic may add costs for sites requiring expanded access.

Getting Started with Nuxt 3 and Prismic: A Basic Example

To see how Prismic and Nuxt 3 work together, let’s walk through a simple setup.

Step 1: Install Nuxt 3 and Prismic Modules

First, initialize a new Nuxt 3 project and install the required Prismic modules:

Terminal

npx nuxi@latest init prismic-nuxt
cd prismic-nuxt
npm install

Next, add the Prismic Nuxt module:

Terminal

npx @slicemachine/init@latest

Step 2: Configure Prismic in Nuxt

In nuxt.config.ts, add the endpoint for your Prismic repository:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/prismic'],
  prismic: {
    endpoint: 'https://your-repository-name.prismic.io/api/v2', // Replace with your Prismic repo URL
  },
})

Step 3: Fetch and Display Content

With Prismic configured, you can fetch content for a Nuxt 3 page. Here’s an example to retrieve a blog post:

pages/blog.vue

<template>
  <div>
    <h1 class="text-2xl font-bold mb-8">
      {{ $prismic.asText(blogPage.data.title) }}
    </h1>
    <div v-html="$prismic.asHTML(blogPage.data.content)"></div>
  </div>
</template>

<script setup>
const { client } = usePrismic();

const { data: blogPage } = await useAsyncData("blog_page", () =>
  client.getSingle("blog_page")
);
</script>

In this snippet:

usePrismic is a global prismic composable.
client.getSingle fetches the blog page from Prismic.
blogPage.title and blogPage.content display the title and content from Prismic in the Nuxt page.
$prismic.asHTML converts the prismic object content to HTML.

Step 4: Using Prismic Slice Machine for Dynamic Content

Prismic’s Slice Machine lets you create reusable components, or “slices,” that editors can use to build pages. For example, to include a "Text Section" slice in your Nuxt page, set it up like this:

pages/index.vue

<template>
  <section>
    <h1 class="text-2xl font-bold mb-8">
      {{ $prismic.asText(homepage.data.title) }}
    </h1>
  </section>
  <section v-if="homepage.data.body.length">
    <component
      v-for="slice in homepage.data.body"
      :is="getSliceComponent(slice.slice_type)"
      :key="slice.id"
      :slice="slice"
    />
  </section>
</template>

<script setup>
const { client } = usePrismic();

const { data: homepage } = await useAsyncData("homepage", () =>
  client.getSingle("homepage")
);

const getSliceComponent = (type) => `section-${type}`;
</script>

This snippet demonstrates how to dynamically render slices from Prismic, making it easy for content editors to build complex layouts.

Now, create 2 files Image.vue and Text.vue into a components folder.

components/Image.vue

<template>
  <div class="grid grid-cols-2 gap-2">
    <img
      :src="s.gallery.url"
      :alt="s.gallery.alt"
      v-for="(s, index) in slice.items"
      :key="`img__${index}`"
    />
  </div>
</template>

<script setup>
defineProps({ slice: { type: Array } });
</script>

components/Text.vue

<template>
  <div v-html="$prismic.asHTML(slice.primary.content)" class="text"></div>
</template>
<script setup>
defineProps({ slice: { type: Array } });
</script>

<style lang="scss" scoped>
.text {
  margin-bottom: 10px;
  ::v-deep(h2) {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>

Pros and Cons :

Pros :

Server-side rendering enhances SEO
Flexible content management for teams
Real-time preview and draft modes
Improved SEO with dynamic meta control
Optimized development workflow

Cons :

Dependency on external APIs
Limited offline functionality
Costs can increase with advanced needs

Demo

Github : https://github.com/SAHA-Technology/nuxt-prismic-blog
Vercel : https://demo-saha-nuxt-prismic.vercel.app/
Resources: Prismic, Nuxt, Tailwindcss

Conclusion

Nuxt 3 and Prismic are a powerful combination for building dynamic, content-driven sites. With server-side rendering, flexible content management, and SEO-friendly design, this setup is perfect for websites that need both high performance and easy content updates. While some challenges exist, particularly around customization and API usage, the advantages of using Prismic with Nuxt 3 make it a highly effective solution for creating fast, flexible, and easy-to-manage websites.

At SAHA Technology, we use Prismic and Nuxt. If you have a project and want to benefit from Prismic and Nuxt, let's have a talk!
We will give you a 25% discount from our first collaboration.