Use Nuxt with Prismic

Overview

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

• Build pages using slices and page types.

• Write content alongside live previews.

• Preview pages before publishing with full-website previews.

• Model content with Slice Machine.

• Fetch and display Prismic content using SDKs.

• Code with confidence using generated TypeScript types.

• Write content in multiple languages with locales.

Your favorite Nuxt features are also supported:

• Integrate and configure Prismic through a Nuxt module.

• Build with auto-imported components and helpers.

• Render your website using any rendering mode.

• Fetch data from anywhere with useAsyncData.

This page teaches you how to set up a Nuxt website with Prismic.

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.

• 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 performs the following:

  • Installs Slice Machine and @nuxtjs/prismic.

  • Registers @nuxtjs/prismic in nuxt.config.ts.

  • Sets up content previews by creating an endpoint at /preview.

  • Sets up live previews by creating a page at /slice-simulator.

  • Creates a Prismic client available through usePrismic().

  • Saves Slice Machine configuration at slicemachine.config.json.

• Model page content

  Content modeling is the process of converting page designs into structured fields. We recommend adding support for a homepage and general pages.

  See the recommended page models
• 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
• Deploy your website

  Before content writers can collaborate on the website, you’ll need to host it online.

  See the deploy instructions
• Publish content

  Your Nuxt website is now set up and ready for content. Visit your Prismic repository to build pages.

  To recap, you completed the following:

  • Created a Prismic repository to store your website’s content.

  • Set up a Nuxt project and integrated Prismic.

  • Prepared your website for a homepage and general pages.

  • Added support for live and full-website previews.

  • Deployed your website to your hosting provider.

  Continue adding slices and other content models as you develop your website.

Create pages

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

Learn how to model pages and create Nuxt page files in the Content Modeling guide. In the guide, you’ll find code snippets to bootstrap your pages.

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 some text and a link using a rich text and link field.

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

// The array passed to `getSliceComponentProps` is purely optional.
// Consider it as a visual hint for you when templating your slice.
defineProps(
  getSliceComponentProps<Content.CallToActionSlice>([
    "slice",
    "index",
    "slices",
    "context",
  ]),
);
</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>
  <SliceZone
    wrapper="main"
    :slices="page?.data.slices ?? []"
    :components="components"
  />
</template>

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

<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.
• <PrismicEmbed> - Display embed.
• <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 { SliceSimulator } from "@slicemachine/adapter-nuxt/simulator";
  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 document.

  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
    }
  }
}