Prismic

https://prismic.io/docs/
Admin
Prismic is a headless CMS that enables developers and content creators to build dynamic websites...
Tokens:371,378
Snippets:2,948
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example GET response

Source: https://prismic.io/docs/asset-api-technical-reference

Example JSON response from a GET request, showing asset metadata fields such as id, url, filename, size, dimensions, and timestamps.

```json
{
   "id":"Zestwpsz31z-H2JI",
   "url":"https://prismic-io.imgix.net/yourrepo/yourpng.png?auto=format,compress",
   "filename":"example file name.png",
   "size":157432,
   "width":2960,
   "height":1318,
   "last_modified":1709911490751,
   "kind":"image",
   "extension":"png",
   "notes":"notes text",
   "credits":"credits text",
   "alt":"alt text",
   "created_at":1709911490751
}
```

--------------------------------

### Install @prismicio/migrate with npm

Source: https://prismic.io/docs/technical-reference/prismicio-migrate/v0

Install the package using npm.

```bash
npm install @prismicio/migrate
```

--------------------------------

### Install @prismicio/client as peer dependency

Source: https://prismic.io/docs/technical-reference/prismicio-vue

Install @prismicio/client, which is now a peer dependency and must be installed separately.

```bash
npm install --save @prismicio/client
```

--------------------------------

### Install @prismicio/react and @prismicio/client with npm

Source: https://prismic.io/docs/technical-reference/prismicio-react

Manually installs the package in any React project. @prismicio/client is a peer dependency and must be installed.

```bash
npm install --save @prismicio/react @prismicio/client
```

--------------------------------

### Install @nuxtjs/prismic v5 and @prismicio/client

Source: https://prismic.io/docs/technical-reference/nuxtjs-prismic/v5

Install command for upgrading to v5. @prismicio/client is now a peer dependency and must be installed.

```Shell
npm install --save-dev @nuxtjs/prismic@^5 @prismicio/client
```

--------------------------------

### Install @prismicio/react v3

Source: https://prismic.io/docs/technical-reference/prismicio-react

Install the v3 version of @prismicio/react. This is the first step in upgrading from v2.

```bash
npm install @prismicio/react@^3
```

--------------------------------

### fulltext filter examples in JavaScript

Source: https://prismic.io/docs/content-api

Two examples: searching all documents for 'quickstart' and searching page documents' description field for 'configuration codes'.

```tsx
// all documents that contain the word "quickstart"
prismic.filter.fulltext("document", "quickstart");

// all page documents with a description that contains the words "configuration" and "codes"
prismic.filter.fulltext("my.page.description", "configuration codes");
```

--------------------------------

### Install @prismicio/next v2

Source: https://prismic.io/docs/technical-reference/prismicio-next/v2

Install the v2 version of @prismicio/next using npm.

```sh
npm install @prismicio/next@^2
```

--------------------------------

### Install @prismicio/next and @prismicio/client

Source: https://prismic.io/docs/technical-reference/prismicio-next/v2

Manually install the package and its peer dependency in any Next.js project.

```sh
npm install --save @prismicio/next @prismicio/client
```

--------------------------------

### Install @prismicio/vue with npm or Prismic CLI

Source: https://prismic.io/docs/technical-reference/prismicio-vue/v6

Install @prismicio/vue either via the Prismic CLI during Nuxt setup or manually in any Vue project. The client package is a required peer dependency.

```sh
npx prismic init
```

```sh
npm install --save @prismicio/vue @prismicio/client
```

--------------------------------

### Install @prismicio/svelte and @prismicio/client

Source: https://prismic.io/docs/technical-reference/prismicio-svelte/v2

Manually install the package in any Svelte project. @prismicio/client is a peer dependency and must be installed.

```sh
npm install --save @prismicio/svelte @prismicio/client
```

--------------------------------

### Install @prismicio/react via CLI or npm

Source: https://prismic.io/docs/technical-reference/prismicio-react/v3

These commands install or set up the Prismic React package. The first initializes a Next.js project with the Prismic CLI, while the second manually installs the package and its peer dependency.

```sh
npx prismic init
```

```sh
npm install --save @prismicio/react @prismicio/client
```

--------------------------------

### GraphQL Client Setup for Prismic

Source: https://prismic.io/docs/graphql-technical-reference

Sets up a GraphQL Client using the graphql-request library. Requires the graphql-request package and a Prismic client with a graphqlFetch method. Uses GET requests.

```tsx
// GraphQL Client - prismicio.js

import { GraphQLClient } from "graphql-request";

// The rest of the file...

export const client = new GraphQLClient(
  prismic.getGraphQLEndpoint(repositoryName),
  {
    fetch: prismicClient.graphqlFetch,
    method: "get",
  },
);
```

--------------------------------

### Install @slicemachine/adapter-nuxt alone

Source: https://prismic.io/docs/technical-reference/slicemachine-adapter-nuxt/v0.1

Use this command to install the adapter package on its own.

```bash
npm install --save-dev @slicemachine/adapter-nuxt
```

--------------------------------

### Install package with npm install --save-dev @slicemachine/adapter-sveltekit

Source: https://prismic.io/docs/technical-reference/slicemachine-adapter-sveltekit/v0.0

Use this command to install only the adapter package as a dev dependency.

```bash
npm install --save-dev @slicemachine/adapter-sveltekit
```

--------------------------------

### Install @slicemachine/adapter-next standalone

Source: https://prismic.io/docs/technical-reference/slicemachine-adapter-next/v0.1

Use this command to install the adapter package on its own as a dev dependency.

```bash
npm install --save-dev @slicemachine/adapter-next
```

--------------------------------

### Install @slicemachine/adapter-nuxt2 with npm

Source: https://prismic.io/docs/technical-reference/slicemachine-adapter-nuxt2/v0.3

Install the adapter package on its own as a dev dependency.

```bash
npm install --save-dev @slicemachine/adapter-nuxt2
```

--------------------------------

### Initialize Prismic with CLI

Source: https://prismic.io/docs/nuxt

Runs the Prismic init command to create a Prismic repository, install packages, and configure your project. If you already have a repository, provide its domain with the --repo flag.

```sh
npx prismic init
```

--------------------------------

### Install negotiator and @formatjs/intl-localematcher

Source: https://prismic.io/docs/nextjs

Installs the packages required for locale detection in a Next.js internationalization setup. Run in your project root.

```sh
npm install negotiator @formatjs/intl-localematcher
```

--------------------------------

### Start development server for slice simulator

Source: https://prismic.io/docs/slice

The slice simulator runs off your website's development server. Run your website's development command to start the server.

```bash
npm run dev
```

--------------------------------

### Add slicemachine script to package.json

Source: https://prismic.io/docs/technical-reference/slice-machine-ui/v1

Manual installation step: add a slicemachine script to your package.json to start Slice Machine.

```diff
  {
    scripts: {
+     "slicemachine": "start-slicemachine"
    }
  }
```

--------------------------------

### Manually install @prismicio/vue and @prismicio/client

Source: https://prismic.io/docs/technical-reference/prismicio-vue

Install the package and its peer dependency in any Vue project. @prismicio/client is required.

```bash
npm install --save @prismicio/vue @prismicio/client
```

--------------------------------

### Filter query with @prismicio/client

Source: https://prismic.io/docs/content-api

Example of using @prismicio/client to query documents with filters for publication year and document type. Requires installing @prismicio/client and setting up an endpoint.

```tsx
import * as prismic from "@prismicio/client";

const endpoint = prismic.getEndpoint("your-repo-name");
const client = prismic.createClient(endpoint);

const init = async () => {
  client.get({
    filters: [
      prismic.filter.dateYear("document.last_publication_date", 2020),
      prismic.filter.at("document.type", "blog-post"),
    ],
  });
};

init();
```

--------------------------------

### Use a date field in a Nuxt component with usePrismic

Source: https://prismic.io/docs/fields/date

Use the usePrismic() composable to get asDate and compute a formatted date in a Nuxt component's script setup.

```vue
<script setup lang="ts">
const { asDate } = usePrismic();

const date = computed(() => asDate(slice.primary.release_date));
</script>

<template>
  <span>{{ date?.toLocaleDateString("en-US") }}</span>
</template>
```

--------------------------------

### GET /api/v2/documents/search (with date.year filter)

Source: https://prismic.io/docs/content-api

This example shows a query for documents of type "article" and last published in 2020, using the `q` parameter with two filters.

```APIDOC
## [GET] /api/v2/documents/search

### Description
Searches for documents using the `q` parameter with filters. The example shows a query for documents of type "article" and last published in 2020.

### Method
GET

### Endpoint
`https://your-repo-name.cdn.prismic.io/api/v2/documents/search`

### Parameters
#### Query Parameters
- **ref** (string) - Required - The ref (release or master) to query against.
- **q** (string) - Required - The query filter(s) in the format `[[filter1][filter2]]`. Must be URL-encoded.

### Request Example
```
https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K&q=%5B%5Bat(document.type%2C%22article%22)%5D%5Bdate.year(document.last_publication_date%2C2020)%5D%5D
```

### Response
#### Success Response (200)
- **results** (array) - List of documents matching the query.
- **page** (integer) - Current page number.
- **total_pages** (integer) - Total number of pages.
- **total_results_size** (integer) - Total number of results.

#### Response Example
```json
{
  "page": 1,
  "results_size": 1,
  "results": [
    {
      "id": "WmdIBCcAAHhUDe_K",
      "type": "article",
      "href": "https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K",
      "tags": [],
      "first_publication_date": "2020-01-01T00:00:00+0000",
      "last_publication_date": "2020-01-01T00:00:00+0000",
      "slugs": ["my-article"],
      "linked_documents": [],
      "lang": "en-us",
      "alternate_languages": [],
      "data": {}
    }
  ],
  "version": "draft",
  "version_id": "WmdIBCcAAHhUDe_K"
}
```
```

--------------------------------

### Run init script

Source: https://prismic.io/docs/technical-reference/slice-machine-ui/v1

Run this command in your project to install Slice Machine and set up boilerplate and configuration.

```bash
npx @slicemachine/init@latest
```

--------------------------------

### Fetch paginated results with page and pageSize in Nuxt

Source: https://prismic.io/docs/fetch-content

Uses usePrismic and useAsyncData to fetch a specific page of blog posts with client.getByType. The page and pageSize options control pagination. This example is for a Nuxt component with a script setup block.

```Vue
<script setup lang="ts">
const prismic = usePrismic();
const { data: blogPosts } = await useAsyncData("about-us", () =>
  prismic.client.getByType("blog_post", {
    page: 2,
    pageSize: 10,
  }),
);
</script>
```

--------------------------------

### Replace query hooks with TanStack Query

Source: https://prismic.io/docs/technical-reference/prismicio-react

Replace query hooks with a query library such as TanStack Query. The example shows using useQuery with a Prismic client method. See TanStack Query's Quick Start for details on useQuery().

```tsx
import { usePrismicDocumentByUID } from "@prismicio/react"; 
import { useQuery } from "@tanstack/react-query"; 
import { client } from "../prismicio"; 

function Home() {
  const [page] = usePrismicDocumentByUID("page", "home"); 
  const { data } = useQuery({ 
    queryKey: ["home"], 
    queryFn: () => client.getByUID("page", "home"), 
  }); 

  return <h1>{data?.data.title}</h1>;
}
```

--------------------------------

### Initialize Prismic with existing repository

Source: https://prismic.io/docs/nuxt

Runs the Prismic init command with the --repo flag to connect to an existing Prismic repository by providing its domain.

```sh
npx prismic init --repo your-domain
```

--------------------------------

### Create slicemachine.config.json

Source: https://prismic.io/docs/technical-reference/slice-machine-ui/v1

Manual installation step: create a slicemachine.config.json file at the root of your project with repositoryName, adapter, and libraries properties.

```json
{
  "repositoryName": "example-prismic-repo",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"]
}
```

--------------------------------

### Migrate WordPress content with an AI prompt

Source: https://prismic.io/docs/from-wordpress

Use this prompt to start an AI-assisted migration from WordPress to Prismic. It directs the agent to migrate the blog and pages from a given URL to a new Next.js website, while preserving existing URLs and following the migration guide.

```markdown
Migrate the blog and pages from https://example.com to a new Next.js
website with Prismic. The site uses WordPress. Keep the existing URLs.
Follow the migration guide: npx prismic docs view migration

```

--------------------------------

### Create SvelteKit project with CLI

Source: https://prismic.io/docs/sveltekit

Creates a new SvelteKit project using the sv CLI and navigates into the project directory.

```sh
npx sv create my-website
cd my-website
```

--------------------------------

### Install updated packages with npm

Source: https://prismic.io/docs/prismicio-client-v7-migration-guide

Run npm install to update your installed packages after modifying package.json.

```bash
npm install
```

--------------------------------

### Install @prismicio/vue v6

Source: https://prismic.io/docs/technical-reference/prismicio-vue

Install the v6 version of @prismicio/vue. This version is automatically installed when using @nuxtjs/prismic v5.

```bash
npm install --save @prismicio/vue@^6
```

--------------------------------

### Install migration dependencies

Source: https://prismic.io/docs/migration/programmatic

Install the required packages for the migration script: @prismicio/client, @prismicio/migrate, and dotenv.

```bash
npm install @prismicio/client @prismicio/migrate dotenv
```

--------------------------------

### Using @prismicio/client to Fetch Content

Source: https://prismic.io/docs/content-api

Shows how to use the @prismicio/client development kit to perform API requests without manually constructing URLs. The kit handles fetching the ref and technical details.

```tsx
import * as prismic from "@prismicio/client"

const client = prismic.createClient("your-repo-name")

const posts = await client.getAllByType("post", { page: 2, pageSize, 5 })
```

--------------------------------

### fulltext filter examples in unencoded form

Source: https://prismic.io/docs/content-api

Two examples in unencoded query syntax, matching the JavaScript examples.

```text
// all documents that contain the word "quickstart"
[fulltext(document,"quickstart")]

// all page documents with a description that contains the words "configuration" and "codes"
[fulltext(my.page.description,"configuration codes")]
```

--------------------------------

### Show Prismic CLI help

Source: https://prismic.io/docs/cli

Display help for the Prismic CLI.

```sh
npx prismic --help
```

--------------------------------

### Install @prismicio/svelte v2

Source: https://prismic.io/docs/technical-reference/prismicio-svelte/v2

Run this command to install the v2 version of @prismicio/svelte. Requires Svelte 5.

```sh
npm install @prismicio/svelte@^2
```

--------------------------------

### fulltext filter examples in URL form

Source: https://prismic.io/docs/content-api

Two URL-encoded examples for the fulltext filter, corresponding to the JavaScript and unencoded examples.

```text
// all documents that contain the word "quickstart"
https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K&q=%5B%5Bfulltext(document%2C%22quickstart%22)%5D%5D

// all page documents with a description that contains the words "configuration" and "codes"
https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K&q=%5B%5Bfulltext(my.page.description%2C%22configuration%codes%22)%5D%5D
```

--------------------------------

### Install Vercel Connect and AI SDK packages

Source: https://prismic.io/docs/mcp

Install the required packages for using Vercel Connect with the AI SDK and MCP.

```sh
npm install @vercel/connect ai @ai-sdk/mcp
```

--------------------------------

### not filter examples - URL

Source: https://prismic.io/docs/content-api

URL-encoded query examples for the `not` filter.

```text
// All documents not of type "product"
https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K&q=%5B%5Bnot(document.type%2C%22product%22)%5D%5D

// All documents without the tags "Macaron" and "Cupcake"
https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K&q=%5B%5Bnot(document.tags%2C%5B%22Macaron%22%2C%22Cupcake%22%5D)%5D%5D

// All documents of type "product" without a "price" of 50
https://your-repo-name.cdn.prismic.io/api/v2/documents/search?ref=WmdIBCcAAHhUDe_K&q=%5B%5Bnot(my.product.price%2C50)%5D%5D
```

--------------------------------

### not filter examples - Unencoded

Source: https://prismic.io/docs/content-api

Unencoded query examples for the `not` filter.

```text
// All documents not of type "product"
[not(document.type, "product")]

// All documents without the tags "Macaron" and "Cupcake"
[not(document.tags, ["Macaron", "Cupcake"])]

// All documents of type "product" without a "price" of 50
[not(my.product.price, 50)]
```

--------------------------------

### SvelteKit: configure PrismicPreview, preview route, matcher, prerender, and register

Source: https://prismic.io/docs/slice-machine

For SvelteKit projects: mount the Prismic toolbar in the layout, create the preview API route, add a route matcher for the /preview prefix, set prerender to "auto" so previewed pages render on demand, and register the route.

```svelte
<script lang="ts">
  import type { Snippet } from "svelte";
  import { PrismicPreview } from "@prismicio/svelte/kit";
  import { repositoryName } from "$lib/prismicio";

  type Props = {
    children: Snippet;
  };

  let { children }: Props = $props();
</script>

<main>{@render children()}</main>
<PrismicPreview {repositoryName} />

```

```ts
import { redirectToPreviewURL } from "@prismicio/svelte/kit";
import { createClient } from "$lib/prismicio";

export async function GET({ fetch, request, cookies }) {
  const client = createClient({ fetch });

  return await redirectToPreviewURL({ client, request, cookies });
}

```

```ts
export function match(param) {
  return param === "preview";
}

```

```ts
export const prerender = "auto";

```

```sh
npx prismic preview add http://localhost:5173/api/preview

```

--------------------------------

### Install Prismic CLI skill

Source: https://prismic.io/docs/cli

Install the Prismic skill to teach AI agents how to use the CLI.

```sh
npx skills add --global --yes prismicio/skills
```
Tokens:
Raw