All questions

Sanity + Nuxt 3 frontend, wiring Croct for server-rendered slots

Asked by Amelie Fournier on

AFAmelie Fournier

Marketing site: Sanity content rendered by Nuxt 3 (node 20). Every example I find is Next.js. Two questions.

Does the Nuxt SDK resolve slot content on the server the way the Next.js examples do? And where does the Sanity fallback plug in? Current config:

// nuxt.config.tsexport default defineNuxtConfig({    modules: ['@nuxtjs/sanity'],});

is it just the init command on top of this

Was this helpful?

2 answers

Nnils.k

Yes on both counts. There is a dedicated Nuxt SDK alongside the Vue one, and the release was described as zero-flicker for a reason: content is resolved server-side, so the personalized variant is in the initial HTML and nothing swaps after hydration. Conceptually it is the same story as the Next.js examples, just Nuxt-shaped.

And yes, the starting point on top of your config is the universal quick start:

npx croct@latest init

For the fallback: the slot fetch accepts explicit fallback content, and the intended pattern with Sanity is to pass the document you already fetched through @nuxtjs/sanity as that fallback. When no experience applies to the visitor, or a fetch fails, the component renders your regular Sanity content and the page never comes up empty. Keep the fallback shaped like the slot's component schema so the component renders either source identically.

Was this helpful?
CRChloe Renard

The Next.js bias in the examples annoyed me too, so one pointer: the Vue and Nuxt SDK announcement covers the SSR behavior and is the closest thing to an official Nuxt walkthrough. In practice our Nuxt setup ended up as one composable wrapping the slot fetch with the Sanity query result as fallback, and every personalized component just uses that.

Was this helpful?
Still have questions?