Use Nuxt with Prismic

OverviewCopy link

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

• Model content with page types and slices using the Type Builder or the Prismic CLI.
• 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 websiteCopy link

Prismic can be added to new or existing Nuxt websites. Set up your project using the Type Builder, a tool for building by hand, or the Prismic CLI, a tool for AI agents.

Create pagesCopy link

Content writers create pages from page types, like a homepage, blog post, or landing page. Model page types by hand in the Type Builder, or with the Prismic CLI for AI agents. TypeScript types are generated automatically.

Write page componentsCopy link

Each page type needs a Nuxt page component. With 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 routesCopy link

The Prismic CLI keeps routes in prismic.config.json in sync with your page types, whether you model in the Type Builder or with CLI commands.

Page routes are inferred from each page type’s API ID:

• A page type named Homepage maps to /.
• A page type named Page maps to /:uid.
• Any other page type, like Blog Post, maps to /<api-id>/:uid (e.g. /blog-post/:uid).

{
  "repositoryName": "example-prismic-repo",
  "routes": [
    { "type": "homepage", "path": "/" },
    { "type": "page", "path": "/:uid" },
    { "type": "blog_post", "path": "/blog/:uid" }
  ]
}

Edit prismic.config.json directly to customize routes. Make sure your routes match your Nuxt file-system routes. Here are common examples:

Create slicesCopy link

Content writers build pages from reusable sections called slices, like a block of text, a hero, or a call to action. Model slices by hand in the Type Builder, or with the Prismic CLI for AI agents. TypeScript types are generated automatically.

Write Vue componentsCopy link

The Prismic CLI generates a starter component in ~/slices/<SliceName>/index.vue. Edit the component to add your implementation.

The following example Call to Action component displays a rich text field and a link.

<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 contentCopy link

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

The Prismic clientCopy link

The Prismic CLI keeps your prismic.config.json in sync with the Type Builder. @nuxtjs/prismic reads from it via the clientConfig option in nuxt.config.ts, which centralizes your client configuration.

import prismicConfig from "./prismic.config.json";

export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  prismic: {
    endpoint: prismicConfig.repositoryName,
    clientConfig: {
      routes: prismicConfig.routes,
    },
  },
});

Fetch content in pages and slicesCopy link

Call the usePrismic composable to access the client. Use the client to fetch content. The following example 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. The following 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 tokenCopy link

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

• Generate an access tokenCopy link

  npx prismic token create

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

  .env

  Copy

  NUXT_PUBLIC_PRISMIC_ACCESS_TOKEN=my-access-token

  Access tokens can also be managed in your repository at Settings → API & Security.

• Pass the access token to your clientCopy link

  Provide the token via the accessToken option in clientConfig:

  nuxt.config.ts

  Copy

  export default defineNuxtConfig({
    modules: ["@nuxtjs/prismic"],
    prismic: {
      endpoint: prismicConfig.repositoryName,
      clientConfig: {
        accessToken: process.env.NUXT_PUBLIC_PRISMIC_ACCESS_TOKEN, 
        routes: prismicConfig.routes,
      },
    },
  });

• Change your repository’s API accessCopy link

  Set the API access to private. Content API requests will immediately require an access token.

  npx prismic repo set-api-access private

  API visibility can also be managed in your repository at Settings → API & Security.

Display contentCopy link

Display content using @prismicio/vue. Here are the most commonly used components:

• <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 BuilderCopy link

The Page Builder shows live-updating thumbnails for each slice as content writers edit.

Live previews are powered by the slice simulator, a special route that renders individual slices. The Prismic CLI creates the simulator page at pages/slice-simulator.vue when you run prismic init.

Tell Prismic where your simulator is running so the Page Builder can load it:

npx prismic preview set-simulator http://localhost:3000

The simulator URL can also be set from any document. Click the ”…” button next to the Publish/Unpublish button in the top-right corner and select Live preview settings.

Once your website is deployed, update the simulator URL to your production domain.

Preview draft contentCopy link

Full-website previews let content writers see draft content on your website before publishing. The @nuxtjs/prismic module registers the /preview route automatically once it’s added to nuxt.config.ts.

Add a development preview URL so you can preview drafts locally:

npx prismic preview add http://localhost:3000/preview --name Development

Once deployed, add your production URL as a second preview. Previews can also be managed at Settings → Previews.

DeployCopy link

Deploy your Nuxt website with your hosting provider:

• Netlify
• NuxtHub
• Vercel
• AWS Amplify
• Cloudflare

Handle content changesCopy link

If you deploy your website with nuxt generate, it needs to rebuild when content changes in Prismic. Follow the instructions in our webhooks documentation for your hosting provider.

Register the rebuild endpoint as a webhook so Prismic calls it when content is published or unpublished:

npx prismic webhook create https://example.com/your-rebuild-endpoint \
  --trigger documentsPublished \
  --trigger documentsUnpublished

Webhooks can also be managed at Settings → Webhooks.

SEOCopy link

<script setup lang="ts">
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>

InternationalizationCopy link

Prismic supports multi-lingual websites. See Locales for details on locale management.