Get help on Discord

Using Sanity GROQ queries in nuxt.config.js for dynamic route generation

13 replies
Last updated: Nov 30, 2025
Hello everyone,I am struggling with something and I am surprised I am not able to find a solution out there. (I found an article on medium but their solution did not work for me).

I am using sanity with nuxt and since I am building my app/site with nuxt generate I need to make sure I can create all the dynamic routes in my nuxt.config.js
This is something I have done in other cases using REST APIs and axios.
Actually even in this case I have tried doing the below with axios and it worked.


let dynamicRoutes = () => {
  return axios
    .get(
      `<https://XXXXXXXX.api.sanity.io/v1/data/query/BLABLA?query=YYYYYYYYYYY>`,
      axiosconfig
    )
    .then((res) => {
      return res.data.result.map((el) =>
        el._type === 'bbb'
          ? `/detail-bbb/${el.slug}/`
          : `/detail-aaa/${el.slug}/`
      )
    })
}

// and then 
generate: {
    routes: dynamicRoutes,
  },
this works. I basically play with the API using vision and I copy the URL from there and with axios I am able to get this to work.

Anyways this is not good and I want to have my proper GROQ query and use sanity for it as I have done in my components and pages but I cannot get it done.

Is there any link you guys can point me to?
AI Update

I can definitely help you get this working with the proper @sanity/client and GROQ queries instead of using axios!

The solution is to use @sanity/client in your nuxt.config.js file to execute your GROQ queries. Here's how to do it:

First, make sure you have @sanity/client installed:

npm install @sanity/client

Then in your nuxt.config.js, import and configure the Sanity client at the top of the file:

const sanityClient = require('@sanity/client')

const client = sanityClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'YOUR_DATASET', // usually 'production'
  apiVersion: '2024-01-01', // use current date
  useCdn: false, // `false` if you want to ensure fresh data for build
})

const dynamicRoutes = async () => {
  const query = `*[_type in ["aaa", "bbb"]]{
    _type,
    "slug": slug.current
  }`
  
  const results = await client.fetch(query)
  
  return results.map((el) => 
    el._type === 'bbb'
      ? `/detail-bbb/${el.slug}/`
      : `/detail-aaa/${el.slug}/`
  )
}

export default {
  // ... other config
  generate: {
    routes: dynamicRoutes
  }
}

Key points:

  1. Use require() not import - Since nuxt.config.js runs in a Node context during build time, you need to use CommonJS require() syntax rather than ES6 imports

  2. Set useCdn: false - For build-time queries, you want fresh data directly from the API, not cached CDN data

  3. Use async/await - The client.fetch() method returns a Promise, so make your dynamicRoutes function async

  4. apiVersion - Always specify an API version. You can use today's date or a fixed date for consistency

If you're using Nuxt 3, the config file might be nuxt.config.ts and you can use ES6 imports:

import sanityClient from '@sanity/client'

const client = sanityClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: false,
})

export default defineNuxtConfig({
  // ... other config
  hooks: {
    async 'nitro:config'(nitroConfig) {
      const query = `*[_type in ["aaa", "bbb"]]{ _type, "slug": slug.current }`
      const results = await client.fetch(query)
      
      const routes = results.map((el) => 
        el._type === 'bbb' ? `/detail-bbb/${el.slug}/` : `/detail-aaa/${el.slug}/`
      )
      
      nitroConfig.prerender.routes = routes
    }
  }
})

This gives you the proper Sanity client integration with full GROQ query support, just like you're using in your components! The Nuxt.js quickstart guide has more details on setting up Sanity with Nuxt.

Show original thread
13 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?