85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
---
|
|
title: Nuxt & Sanity Integration Rules
|
|
description: Integration guide for Nuxt, including @nuxtjs/sanity, visual editing, and data fetching.
|
|
---
|
|
|
|
# Nuxt & Sanity Integration Rules
|
|
|
|
## 1. Setup & Configuration
|
|
|
|
### Configuration (`nuxt.config.ts`)
|
|
Use the official `@nuxtjs/sanity` module.
|
|
|
|
**Important:** Ensure the `minimal` client is NOT enabled if you want full features.
|
|
|
|
```typescript
|
|
export default defineNuxtConfig({
|
|
modules: ["@nuxtjs/sanity"],
|
|
sanity: {
|
|
projectId: process.env.NUXT_SANITY_PROJECT_ID,
|
|
dataset: process.env.NUXT_SANITY_DATASET,
|
|
apiVersion: "2026-02-01",
|
|
// 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
|
|
},
|
|
},
|
|
});
|
|
```
|
|
|
|
## 2. Data Fetching
|
|
|
|
### `useSanityQuery`
|
|
Use the composable provided by the module for reactive fetching. It automatically handles preview state when configured.
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const query = groq`*[_type == "post"]{title, slug}`;
|
|
const { data: posts } = await useSanityQuery(query);
|
|
</script>
|
|
|
|
<template>
|
|
<ul>
|
|
<li v-for="post in posts" :key="post._id">{{ post.title }}</li>
|
|
</ul>
|
|
</template>
|
|
```
|
|
|
|
## 3. Visual Editing (Live Preview)
|
|
|
|
### Automatic Setup
|
|
When `visualEditing` is configured in `nuxt.config.ts`, the module handles:
|
|
1. Injecting the Visual Editing overlays.
|
|
2. Refreshing data when content changes in the Studio.
|
|
3. Enabling Stega encoding.
|
|
|
|
### Handling Stega in Logic
|
|
Just like Next.js, if you use stega-encoded strings in logic (e.g. `v-if="post.layout === 'full'"`), you must clean them.
|
|
|
|
```typescript
|
|
import { stegaClean } from "@sanity/client/stega";
|
|
|
|
const layout = computed(() => stegaClean(props.layout));
|
|
```
|
|
|
|
## 4. Components
|
|
|
|
### Portable Text
|
|
Use the `<PortableText>` component (if installed via `@portabletext/vue` or provided by the module).
|
|
|
|
```vue
|
|
<PortableText :value="post.body" :components="customComponents" />
|
|
```
|
|
|
|
### Images
|
|
Use `@sanity/image-url` helper or a dedicated image component.
|
|
|
|
```typescript
|
|
import imageUrlBuilder from '@sanity/image-url'
|
|
const builder = imageUrlBuilder(useSanity().client)
|
|
// ... url generation logic
|
|
```
|