Nuxt.config.js `$prismic is not defined` error

Developing with Prismic
1

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.

// 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:

// 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?

3

4 posts were merged into an existing topic: Generate sitemap according prismic data in Nuxt