Nuxt · Sanity Best Practices · sanity-io/agent-toolkit · Skills Docs

Nuxt · Sanity Best Practices · sanity-io/agent-toolkit · Skills Docs

export default defineNuxtConfig({
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: process.env.NUXT_SANITY_PROJECT_ID,
    dataset: process.env.NUXT_SANITY_DATASET,
    apiVersion: '2026-05-15',
    // Live Visual Editing Configuration
    visualEditing: {
      studioUrl: process.env.NUXT_SANITY_STUDIO_URL,
      token: process.env.NUXT_SANITY_API_READ_TOKEN, // Required for fetching drafts
      stega: true, // Enable stega for visual editing
      mode: 'live-visual-editing', // Default: enables live updates
    },
  },
});

<!-- app/pages/posts.vue -->
<script setup lang="ts">
const query = groq`*[_type == "post" && defined(slug.current)]{ _id, title, slug }`
const { data: posts } = await useSanityQuery<Array<{ _id: string; title?: string; slug?: { current?: string } }>>(query)
</script>

<template>
  <ul>
    <li v-for="post in posts || []" :key="post._id">
      <NuxtLink :to="`/${post.slug?.current}`">{{ post.title }}</NuxtLink>
    </li>
  </ul>
</template>

<!-- app/pages/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const query = groq`*[_type == "post" && slug.current == $slug][0]{ _id, title, body }`
const { data: post } = await useSanityQuery<{ _id: string; title?: string; body?: unknown[] }>(
  query,
  { slug: route.params.slug }
)
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <SanityContent v-if="post.body" :value="post.body" />
  </article>
</template>