Use Nuxt with Prismic

Overview

Prismic has a first-party Nuxt integration that supports all of Prismic’s features:

• Model content with slices and page types using Slice Machine.
• Fetch and display content using SDKs with generated TypeScript types.
• Preview draft content with live previews and full-website previews.

Here’s what a Prismic page looks like in Nuxt:

<script setup lang="ts">
import { components } from "~/slices";

// 1. Fetch a page from Prismic
const prismic = usePrismic();
const route = useRoute();
const { data: page } = await useAsyncData(route.params.uid as string, () =>
  prismic.client.getByUID("page", route.params.uid as string),
);
</script>

<template>
  <main>
    <!-- 2. Display the page's slices -->
    <SliceZone :slices="page?.data.slices ?? []" :components="components" />
  </main>
</template>

Nuxt websites use @nuxtjs/prismic, @prismicio/client, and @prismicio/vue.

Set up a Nuxt website

Prismic can be added to new or existing Nuxt websites. Follow these steps to set up a Nuxt project.

• Create a Prismic repository

  From the Prismic dashboard, create a Prismic repository. Select Nuxt.

  

  When asked to select a starter, select Connect your own web app.

  If you prefer starting with a template, select Minimal starter or Full website demo instead.

• Set up a Nuxt project

  Follow the setup instructions shown in your Prismic repository.

  

  The instructions guide you through creating a new Nuxt project (if needed) and adding Prismic using @slicemachine/init.

  The @slicemachine/init command installs Prismic’s packages and configures your project with a Prismic client, content previews, and a Nuxt module.

• Set up content previews

  Content writers can preview content on your website before publishing.

  @slicemachine/init performs most of the setup for you. However, there are a few steps to complete manually.

  See the preview setup instructions
• Start building with Prismic

  Your Nuxt website is now ready for Prismic. Next, learn how to create pages and slices.

Create pages

Website pages are managed in Prismic using page types. Page types are created in Slice Machine.

Write page components

Each page type needs a Nuxt page component. With Nuxt’s file-system based routing, you create a page file at each page’s path.

The example below shows a page component for a Page page type.

<script setup lang="ts">
import { components } from "~/slices";

const prismic = usePrismic();
const route = useRoute();
const { data: page } = await useAsyncData(route.params.uid as string, () =>
  prismic.client.getByUID("page", route.params.uid as string),
);

useSeoMeta({
  title: page.value?.data.meta_title ?? undefined,
  description: page.value?.data.meta_description ?? undefined,
  ogImage: computed(() => prismic.asImageSrc(page.value?.data.meta_image)),
});
</script>

<template>
  <main>
    <SliceZone :slices="page?.data.slices ?? []" :components="components" />
  </main>
</template>

Define routes

Prismic needs to know your website’s routes to fill in link URLs. Configure the Nuxt module’s clientConfig.routes option in nuxt.config.ts with a set of route resolvers.

This example includes routes for a homepage, general pages, and a blog.

export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  prismic: {
    endpoint: "example-prismic-repo",
    clientConfig: {
      // `type` is the API ID of a page type.
      // `path` determines the URL for a page of that type.
      routes: [
        { type: "homepage", path: "/" },
        { type: "page", path: "/:uid" },
        { type: "blog_post", path: "/blog/:uid" },
      ],
    },
  },
});

Your route resolvers should match your Nuxt file-system-based routes. Here are some commonly used routes:

Create slices

Page content is written using reusable page sections called slices. Slices are created in Slice Machine.

Write Vue components

Slice Machine generates a bootstrapped Vue component when a slice is created. You can find the generated files in ~/slices or whichever slice library was selected.

Once your slice is configured with fields, edit the slice’s index.vue file to display the slice’s content.

Here is an example of a Call to Action slice. It displays a rich text field and a link field.

<script setup lang="ts">
import type { Content } from "@prismicio/client";

defineProps(getSliceComponentProps<Content.CallToActionSlice>());
</script>

<template>
  <section class="flex flex-col gap-4 p-8">
    <PrismicRichText :field="slice.primary.text" />
    <PrismicLink :field="slice.primary.link" class="button" />
  </section>
</template>

Fetch content

Use @prismicio/client and its methods to fetch page content.

Configure the module’s Prismic client

@nuxtjs/prismic creates a Prismic client using the module’s configuration. You can configure it further using the clientConfig option in nuxt.config.ts.

This example configures the client with an access token.

export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  prismic: {
    endpoint: "example-prismic-repo",
    clientConfig: {
      accessToken: "example-access-token",
    },
  },
});

Fetch content in pages and slices

Call the usePrismic composable to access the client. Use the client to fetch content.

This example page fetches content for a /[uid] dynamic route.

<script setup lang="ts">
import { components } from "~/slices";

const prismic = usePrismic();
const route = useRoute();
const { data: page } = await useAsyncData(route.params.uid as string, () =>
  prismic.client.getByUID("page", route.params.uid as string),
);
</script>

<template>
  <main>
    <SliceZone :slices="page?.data.slices ?? []" :components="components" />
  </main>
</template>

You can fetch content in slices the same way. This example fetches a Settings page.

<script setup lang="ts">
import { components } from "~/slices";

const prismic = usePrismic();
const { data: page } = await useAsyncData("settings", () =>
  prismic.client.getSingle("settings"),
);

// ...
</script>

Secure with an access token

Published content is public by default. You can require a private access token to secure the API.

• Open your API & Security settings

  Navigate to your Prismic repository and go to Settings > API & Security.

  

• Change the API access

  Under the Repository security section, change the API access dropdown to “Private API.”

  Click Change the API visibility.

• Generate an access token

  Under the Generate an Access Token section, fill out the form.

  Field	Value
  Name	A name to identify your website.
  Callback URL	Leave blank.

  Click Add this application.

• Pass the access token to your client

  Save the access token as an environment variable in a .env file.

  .env

  Copy

  PRISMIC_ACCESS_TOKEN=my-access-token

  Then, pass the access token to clientConfig in nuxt.config.ts.

  nuxt.config.ts

  Copy

  export default defineNuxtConfig({
    modules: ["@nuxtjs/prismic"],
    prismic: {
      endpoint: "example-prismic-repo",
      clientConfig: {
        accessToken: process.env.PRISMIC_ACCESS_TOKEN, 
      },
    },
  });

  The Client ID and Secret values on the API & Security page can be ignored.

Display content

Prismic content can be displayed using @prismicio/vue.

Here are the most commonly used components in Nuxt websites:

• <PrismicLink> - Display links using <NuxtLink>.
• <PrismicImage> - Display images.
• <PrismicRichText> - Display rich text.
• <PrismicText> - Display plain text.
• <SliceZone> - Display slices.

All Prismic components are automatically available in your Nuxt app through auto-imports.

Live previews in the Page Builder

Content writers can preview content live while editing in the Page Builder. Each slice in a page is shown as a live-updating thumbnail.

Set up live previewing

Live previews require a special /slice-simulator route in your Nuxt website.

• Create a page at /slice-simulator

  Create a file at pages/slice-simulator.vue with the following contents.

  ~/pages/slice-simulator.vue

  Copy

  <script setup lang="ts">
  import { components } from "~/slices";
  </script>
  
  <template>
    <SliceSimulator v-slot="{ slices }">
      <SliceZone :slices="slices" :components="components" />
    </SliceSimulator>
  </template>

• Set the simulator URL in the Page Builder

  Navigate to your Prismic repository and open a page.

  Click the ”…” button next to the Publish/Unpublish button in the top-right corner. Select Live preview settings.

  

  In the modal, enter http://localhost:3000/slice-simulator and click Save.

Preview draft content

Content writers can preview content on your website before publishing.

@nuxtjs/prismic performs most of the setup for you. However, there are a few steps to complete manually.

Set up previews in Prismic

After setting up your Nuxt project, set up previews in Prismic.

• Open your preview settings

  Navigate to your Prismic repository and go to Settings > Previews.

  

• Create a preview

  In the Manage your previews section, create a preview using the following values:

  Field	Value
  Site name	Development
  Domain for your application	http://localhost:3000
  Preview route	/preview or the route configured in nuxt.config.ts

  Click Create my preview.

Deploy

To deploy your website, follow the instructions for deploying Nuxt with your chosen hosting provider:

• Netlify
• NuxtHub
• Vercel
• AWS Amplify
• Cloudflare

Handle content changes

Your app needs to be rebuilt when your content changes in Prismic.

Follow the instructions in our webhooks documentation for your hosting provider.

SEO

Prismic websites can be optimized for search engines using meta_title and meta_descriptions fields. These fields provide metadata and may improve your website’s ranking.

Internationalization

Prismic supports websites with multiple languages.

To learn more about Prismic’s locale management, see Locales.

Configure Slice Machine

Slice Machine can be configured in slicemachine.config.json. Add options to the adapter.options property.

{
  "repositoryName": "example-prismic-repo",
  "libraries": ["./src/slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator",
  "adapter": {
    "resolve": "@slicemachine/adapter-nuxt",
    "options": {
      "typescript": true
    }
  }
}