Typegen

@nuxtjs/sanity supports automatic TypeScript type generation for your GROQ queries using @sanity/codegen. This enables end-to-end type safety from your Sanity schema to your Vue components.

Setup

Prerequisites

Your project must have a Sanity schema types file that exports an array of schema type definitions. This is typically located at cms/schemaTypes/index.ts:

import { movie } from './movie'
import { person } from './person'

export const schemaTypes = [movie, person]

Configuration

Enable type generation in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: 'your-project-id',
    typegen: {
      enabled: true,
      schemaTypesPath: './cms/schemaTypes',
    },
  },
})

Usage

Once configured, types are automatically generated during nuxt prepare and whenever schema or query files change in development mode.

Writing Queries

Use the groq template tag to write your queries. Generated types follow a naming convention based on your query variable name:

<script setup lang="ts">
// Query variable: moviesQuery -> Generated type: MoviesQueryResult
const moviesQuery = groq`*[_type == "movie"] { title, slug }`

// Use the generated type for full type safety
const { data } = await useSanityQuery<MoviesQueryResult>(moviesQuery)
</script>

Using defineQuery

For better editor support and explicit query definition, you can use defineQuery:

<script setup lang="ts">
const moviesQuery = defineQuery(`*[_type == "movie"] { title, slug }`)

const { data } = await useSanityQuery<MoviesQueryResult>(moviesQuery)
</script>

Both groq and defineQuery are auto-imported and available throughout your application.

Generated Types

The module generates types based on your query variable names:

These types are automatically available via auto-imports - no manual import statements required.

Server Routes

Type generation also works in your Nitro server routes:

export default defineEventHandler(async () => {
  const sanity = useSanity()
  const query = groq`*[_type == "movie"] { title }`
  
  return sanity.fetch<FetchMoviesQueryResult>(query)
})

Configuration Options

typegen.enabled

• Type: boolean
• Default: false

Enable or disable type generation.

typegen.schemaTypesPath

• Type: string
• Required when enabled is true

Path to your schema types module. This should be a file that exports an array of Sanity schema type definitions.

typegen.schemaTypesExport

• Type: string
• Default: 'schemaTypes'

The export name to read schema types from. By default, the module looks for a named export called schemaTypes, or falls back to the default export.

typegen.queryPaths

• Type: string | string
• Default: ['**/*.{ts,tsx,js,jsx,mjs,cjs,vue,astro}'] (relative to srcDir)

Glob pattern(s) specifying which files to scan for GROQ queries.

typegen.overloadClientMethods

• Type: boolean
• Default: true

When enabled, generates @sanity/client method overloads that provide type inference for the fetch method.

Current Limitations

File Watching

In development mode, the module watches for changes to:

• Your schema types file (schemaTypesPath)
• Any files matching queryPaths patterns

Types are automatically regenerated when these files change.