Define Routes

Most websites have multiple pages, especially those using a content management system. To support multiple pages, a website needs to define how pages and their URLs are generated. Website frameworks like Nuxt define this using routes. A route pairs a page with its URL.

To tell Prismic which URLs in your app are associated to documents, configure your app to use a route resolver. The route resolver is a collection of rules that, when sent along with your Prismic API queries, will automatically resolve a document to a URL in your app.

Resolved URLs are provided in a document’s url property.

Define routes

The route resolver is configured in your Nuxt app’s nuxt.config.js file with the prismic.clientConfig.routes option.

export default defineNuxtConfig({
  prismic: {
    clientConfig: {
      routes: [
        // Resolves the Homepage document to "/"
        {
          type: "homepage",
          path: "/",
        },
      ],
    },
  },
});

The above route resolver will resolve a Homepage document’s URL to /. Now, anytime the Homepage document is queried or referenced in other documents, the response will include a url property containing the correct URL.

You can define any number of routes in the route resolver.

export default defineNuxtConfig({
  prismic: {
    clientConfig: {
      routes: [
        // Resolves the Homepage document to "/"
        {
          type: "homepage",
          path: "/",
        },
        // Resolves the About Page document to "/about"
        {
          type: "about_page",
          path: "/about",
        },
      ],
    },
  },
});

Use metadata in routes

The route resolver lets you define paths containing metadata from the document it is resolving. For example, you could have a Page document that uses its UID field to define its URL, like /about or /blog. Such a route resolver would look like this:

export default defineNuxtConfig({
  prismic: {
    clientConfig: {
      routes: [
        // Resolves Page documents to URLs like "/about" and "/blog"
        {
          type: "page",
          path: "/:uid",
        },
      ],
    },
  },
});

To create pages for Page documents that match this route resolver, create a file at ~/pages/[uid].vue. Learn more about fetching data for this route in the Fetch Data page.

Define nested routes

The route resolver lets you define nested routes. In the following example, a Page document’s URL will be composed using its metadata and the UIDs from its content relationship fields.

export default defineNuxtConfig({
  prismic: {
    clientConfig: {
      routes: [
        {
          type: "page",
          path: "/:section/:category/:uid",
          resolvers: {
            // A list of "path variables" mapped to the API ID
            // of a content relationship field in the page type.
            category: "category",
            section: "category.section",
          },
        },
      ],
    },
  },
});

This route resolver might create a URL path like /animals/fish/tuna.

To create pages for Page documents that match this route resolver, create a file at ~/pages/[section]/[category]/[uid].vue. Learn more about fetching data for this route on the Fetch Data page.