# Generate sitemap according prismic data in Nuxt

**URL:** <https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543>\
**Category:** Developing with Prismic\
**Tags:** nuxtjs\
**Created:** [May 29, 2021, 5:12pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543 "2021-05-29T17:12:22Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![martingjorceski](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/martingjorceski/32/1681_2.png) [@martingjorceski](https://community.prismic.io/u/martingjorceski)\
**Post date:** [May 29, 2021, 5:12pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/1 "2021-05-29T17:12:22Z")

</div>

Hello there ✌  
I'm guessing some of you have some experience with generating Sitemap for your project.  
I'm having a **Nuxt** ( SSR full static ) project.  
I'm using [@nuxtjs/prismic](https://prismic.nuxtjs.org/)  
and [@nuxtjs/sitemap](https://sitemap.nuxtjs.org/) module.

The sitemap module does not generate dynamic pages therefor we need to asynchronously retrieve all the pages we have on the website and process the data into a format required by the sitemap module.

I'm guessing that I need to write some **build module** where I would have access to **prismic** and then generate and write the desired data format.

Help me please to understand how to import or access prismic from module level so I can write the desired logic.

---

<div class="post-metadata">

**Author:** ![aleksandar.basara1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/aleksandar.basara1/32/2087_2.png) [@aleksandar.basara1](https://community.prismic.io/u/aleksandar.basara1)\
**Post date:** [May 31, 2021, 8:51am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/2 "2021-05-31T08:51:28Z")

</div>

What are you using for deployment?

If you are using Netlify, the easiest way is to just use the [Netlify Sitemap Plugin](https://github.com/netlify-labs/netlify-plugin-sitemap).

Best  
Aleks

---

<div class="post-metadata">

**Author:** ![VasiliiD](https://avatars.discourse-cdn.com/v4/letter/v/9dc877/32.png) [@VasiliiD](https://community.prismic.io/u/VasiliiD)\
**Post date:** [May 31, 2021, 10:04am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/3 "2021-05-31T10:04:57Z")

</div>

In nuxt.config.js add:

`const Prismic = require("@prismicio/client");`

And in sitemap configuration block:

```
sitemaps: [
      {
        path: "/sitemap-pages.xml",
        routes: async () => {
          const pages = await getData("page");
          return [...pages.map((i) => `/${i.uid}`)];
        },
      },
    ],

```

In your case names maybe different, but I hope you've got the idea 🙂

---

<div class="post-metadata">

**Author:** ![martingjorceski](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/martingjorceski/32/1681_2.png) [@martingjorceski](https://community.prismic.io/u/martingjorceski)\
**Post date:** [May 31, 2021, 5:24pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/4 "2021-05-31T17:24:27Z")

</div>

I did as you suggest in your code and it works partially.  
All of my static pages are probably rewritten and are missing data, however dynamic pages are filled correctly. Here how my sitemap looks

 ![sitemap](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/3/3270cbeda6d523869b4240c8928fe795162439d8.png)

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [June 7, 2021, 6:54pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/6 "2021-06-07T18:54:31Z")

</div>

@martingjorceski, did you know that you can create the route for your Nuxt project using a Route Resolver?

With @nuxtjs/prismic you can add a `routes` option in the `prismic.apiOptions` configuration object and pass a similar object as you are doing with the other plugin.

> **[Create Complex URLs (The Route Resolver) with Nuxt.js](https://prismic.io/docs/technologies/route-resolver-nuxtjs)**
>
> Learn how to create advanced nested URL structure to the grandparent level with the Route Resolver with Nuxt.js.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [June 17, 2021, 3:12am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/7 "2021-06-17T03:12:32Z")

</div>

This thread has been closed due to inactivity. [Flag to reopen](https://community.prismic.io/t/re-open-a-thread/2175).

---

<div class="post-metadata">

**Author:** ![jackdomleo7](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jackdomleo7/32/2624_2.png) [@jackdomleo7](https://community.prismic.io/u/jackdomleo7)\
**Post date:** [July 26, 2021, 9:03am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/8 "2021-07-26T09:03:08Z")

</div>

Project details:

- `"@nuxtjs/prismic": "^1.3.1"`
- `"nuxt": "^2.15.7"`
- `"typescript": "^4.3.5"`
- `"@nuxtjs/sitemap": "^2.4.0"`

I'm using the repeatable type in Prismic for pages such as policy and blog pages. I want to make sure the routes are generated in my Nuxt project and appear in the sitemap. The sitemap works without any of the below code but it doesn't show the policy routes.

```auto
// nuxt.config.js
generate: {
  async routes () {
    let generatedRoutes = []

    // Policy pages
    let policies = await $prismic.api.query(
      $prismic.predicates.at('document.type','policy')
    )
    policies = policies.results.map(page => page.uid)
    policies.forEach(policyUid => {
      generatedRoutes.push(`/policies/${policyUid}`)
    });

    return generatedRoutes
  }
}

```

But I'm getting an error when accessing `/sitemap.xml`, I get a `$prismic is not defined error`. I felt adding `const { $prismic } = require('@nuxtjs/prismic')` would have resolved this:

```auto
// nuxt.config.js
generate: {
  async routes () {
    const { $prismic } = require('@nuxtjs/prismic')
    let generatedRoutes = []

    // Policy pages
    let policies = await $prismic.api.query(
      $prismic.predicates.at('document.type','policy')
    )
    policies = policies.results.map(page => page.uid)
    policies.forEach(policyUid => {
      generatedRoutes.push(`/policies/${policyUid}`)
    });

    return generatedRoutes
  }
}

```

But the error is now `Cannot read property api of undefined`. Any ideas of getting around this?

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [July 26, 2021, 3:38pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/9 "2021-07-26T15:38:53Z")

</div>

Hi Jack,

Thanks for reaching out; for me, this issue can be because you are supplying an async function 'async routes ()' and not returning a promise such as what is mentioned in the docs:

> **[The generate Property](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#function-which-returns-a-promise)**
>
> Configure the generation of your universal web application to a static web application.

Please let me know if that doesn't fix the issue to try to dig deeper.

Best,  
Fares

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [July 26, 2021, 3:59pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/10 "2021-07-26T15:59:24Z")

</div>

Another point here could be that you need to instantiate the Prismic client where you can't use the $prismic directly; you might need to use asyncData to client API instance in Nuxt such as

> <https://github.com/prismicio/nuxtjs-blog/blob/811a73f9f7178b1ff2a820560bc8ed6eb132dd97/pages/index.vue#L42>

meanwhile I'm going to do some research and I will come back to you if I get an info.

---

<div class="post-metadata">

**Author:** ![jackdomleo7](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jackdomleo7/32/2624_2.png) [@jackdomleo7](https://community.prismic.io/u/jackdomleo7)\
**Post date:** [July 26, 2021, 4:26pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/11 "2021-07-26T16:26:48Z")

</div>

Hi Fares, they don't seem to do the trick. Thank you for helping. It appears the Nuxt config doesn't recognise the `$prismic` object. The way around this would be to install `@prismicio/client` and use `Prismic.client()` to query the content rather than `$prismic.api.query()` from `@nuxtjs/prismic`. This seems more of a `@nuxtjs/prismic` issue, but the GitHub issues tab directed me here for this kind of general query.

Many thanks,  
Jack

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 27, 2021, 9:51am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/12 "2021-07-27T09:51:55Z")

</div>



---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 27, 2021, 9:53am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/14 "2021-07-27T09:53:54Z")

</div>

Hey Everyone,

Since all your static routes are already generated for you by Nuxt and it's crawler, you can just take this information and create your sitemap from this information.

@tbenniks explains how to do this in his blog post and youtube video:

> **[Easy dynamic routes in your Nuxt sitemap](https://timbenniks.dev/writings/easy-dynamic-routes-in-your-nuxt-sitemap)**
>
> This is a hacky but effortless way to add dynamic routes to your sitemap!

Thanks.

---

<div class="post-metadata">

**Author:** ![jackdomleo7](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jackdomleo7/32/2624_2.png) [@jackdomleo7](https://community.prismic.io/u/jackdomleo7)\
**Post date:** [July 27, 2021, 8:17pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/15 "2021-07-27T20:17:11Z")

</div>

Thank you for the response. This is my bad, it looked as though the issue was with the sitemap module but it actually seems to be an issue with the Nuxt prismic module. See bug - [$prismic object not recognised in nuxt.config.(js|ts) · Issue #146 · nuxt-community/prismic-module · GitHub](https://github.com/nuxt-community/prismic-module/issues/146)

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 28, 2021, 8:59am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/16 "2021-07-28T08:59:31Z")

</div>

Yeah, I don't know if it's a bug as it's just not designed to work that way. I can see you got a response in the thread too.

Anyway, the best way to create your sitemap is to use the already generated routes as described above.

Happy coding. 🙂

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [July 29, 2021, 8:59am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/17 "2021-07-29T08:59:35Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 4:15pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/18 "2021-12-09T16:15:15Z")

</div>



---

<div class="post-metadata">

**Author:** ![remotecrew](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@remotecrew](https://community.prismic.io/u/remotecrew)\
**Post date:** [April 13, 2024, 11:44am UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/19 "2024-04-13T11:44:49Z")

</div>

I am facing the same issue as described above. I'm not able to generate a sitemap that includes dynamic data from Prismic.

I am running:  
"nuxt": "^2.0.0",  
"@nuxtjs/sitemap": "^2.0.1",  
"prismic-javascript": "^3.0.2",

Here are the contents of my files:

```auto
# nuxt.config.js
const Prismic = require("@prismicio/client")

buildModules: [
   ...,
    ['@nuxtjs/prismic', {
      endpoint: 'https://my-prismic-website.cdn.prismic.io/api/v2',
      modern: true,
      apiOptions: {
        routes: [
          {
            type: 'blog_article',
            path: '/blog/prismic/:uid',
          },
        ],
      },
    }],
   ...,
   sitemap: {
    hostname: process.env.NUXT_ENV_RC_HOSTNAME,
    gzip: true,
  }
   ...
   generate: {
    routes () {
      const client = Prismic.client('my-prismic-website')
      const pages = client.query(Prismic.Predicates.at('document.type', 'blog_article'))
        .then(res => {
          return res.results.map(page => {
            return '/blog/prismic/' + page.uid
          })
        })
      return pages
    }
  }

```

The app runs as expected but I get a weird error in my sitemap.xml page stating `TypeError: Only absolute URLs are supported.`

I have also tried defining the routes inside of the sitemap property like this:

```auto
sitemap: {
  ...,
  routes: async () => {
        const client = Prismic.client('my-prismic-website')
        const pages = client.query(Prismic.Predicates.at('document.type', 'blog_article'))
          .then(res => {
            return res.results.map(page => {
              return process.env.NUXT_ENV_RC_HOSTNAME + '/blog/' + page.uid
            })
          })
        return pages
  }

```

(I even tried both with and without the `process.env.NUXT_ENV_RC_HOSTNAME`)  
But I always get the exact same error `TypeError: Only absolute URLs are supported.`

Could you take a look and see what I could be missing?

---

<div class="post-metadata">

**Author:** ![remotecrew](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@remotecrew](https://community.prismic.io/u/remotecrew)\
**Post date:** [April 14, 2024, 7:59pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/20 "2024-04-14T19:59:32Z")

</div>

Here's some additional stack trace for the error, if it helps

```auto
ERROR Only absolute URLs are supported 8:51:35 PM

  at getNodeRequestOptions (node_modules/node-fetch/lib/index.js:1327:9)
  at node_modules/node-fetch/lib/index.js:1450:19
  at new Promise (<anonymous>)
  at fetch (node_modules/node-fetch/lib/index.js:1447:9)
  at fetch (node_modules/cross-fetch/dist/node-ponyfill.js:10:20)
  at fetchRequest (node_modules/@prismicio/client/cjs/@prismicio/client.js:997:24)
  at DefaultRequestHandler.request (node_modules/@prismicio/client/cjs/@prismicio/client.js:1046:9)
  at HttpClient.request (node_modules/@prismicio/client/cjs/@prismicio/client.js:1057:29)
  at node_modules/@prismicio/client/cjs/@prismicio/client.js:1079:27
  at DefaultApiCache.get (node_modules/@prismicio/client/cjs/@prismicio/client.js:956:19)
  at run (node_modules/@prismicio/client/cjs/@prismicio/client.js:1074:25)
  at node_modules/@prismicio/client/cjs/@prismicio/client.js:1095:13
  at new Promise (<anonymous>)
  at HttpClient.cachedRequest (node_modules/@prismicio/client/cjs/@prismicio/client.js:1094:16)
  at Api.get (node_modules/@prismicio/client/cjs/@prismicio/client.js:1131:32)
  at DefaultClient.getApi (node_modules/@prismicio/client/cjs/@prismicio/client.js:1232:25)
  at DefaultClient.query (node_modules/@prismicio/client/cjs/@prismicio/client.js:1241:21)
  at routes (nuxt.config.js:181:28)
  at promisifyRoute (node_modules/@nuxtjs/sitemap/lib/cache.js:59:17)
  at AsyncCache.load [as _load] (node_modules/@nuxtjs/sitemap/lib/cache.js:18:28)
  at AsyncCache.get (node_modules/async-cache/ac.js:63:8)
  at node:internal/util:441:7
  at new Promise (<anonymous>)
  at AsyncCache.get (node:internal/util:427:12)
  at handler (node_modules/@nuxtjs/sitemap/lib/middleware.js:99:43)
  at call (node_modules/connect/index.js:239:7)
  at next (node_modules/connect/index.js:183:5)
  at next (node_modules/connect/index.js:161:14)
  at next (node_modules/connect/index.js:161:14)
  at next (node_modules/connect/index.js:161:14)
  at nuxt.options.serverMiddleware.push.route.route (/Users/miguelmarques/Desktop/Remote%20Crew%20Repos/rc-website/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:231:9)
  at call (node_modules/connect/index.js:239:7)
  at next (node_modules/connect/index.js:183:5)
  at redirectSSL (node_modules/redirect-ssl/index.js:42:12)
  at call (node_modules/connect/index.js:239:7)
  at next (node_modules/connect/index.js:183:5)
  at next (node_modules/connect/index.js:161:14)
  at WebpackBundler.middleware (node_modules/@nuxt/webpack/dist/webpack.js:1923:5)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

```

---

<div class="post-metadata">

**Author:** ![remotecrew](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@remotecrew](https://community.prismic.io/u/remotecrew)\
**Post date:** [April 16, 2024, 12:17pm UTC](https://community.prismic.io/t/generate-sitemap-according-prismic-data-in-nuxt/5543/21 "2024-04-16T12:17:07Z")

</div>

Nevermind, I figured out the dumb mistake. For some reason I was passing the name of the project instead of the entire url here:  
`const client = Prismic.client('my-prismic-website')`  
instead of  
`const client = Prismic.client('https://my-prismic-website.cdn.prismic.io/api/v2')`
