Skip to content
Esc
navigateopen⌘Jpreview

Nuxt

Add the Vite plugin and prerender Stet content by crawling linked Nuxt routes.

Nuxt builds with Vite, so the plugin generates the typed client before development and production builds. You need an organization API key in STET_API_KEY; the quickstart covers creating one.

Install

npm install @stetcms/vite @stetcms/client
pnpm add @stetcms/vite @stetcms/client
yarn add @stetcms/vite @stetcms/client
bun add @stetcms/vite @stetcms/client

Add the plugin

import { stet } from '@stetcms/vite';

const hasStetApiKey = process.env.STET_API_KEY !== undefined && process.env.STET_API_KEY !== '';

export default defineNuxtConfig({
  vite: { plugins: [stet()] },
  nitro: {
    prerender: {
      crawlLinks: hasStetApiKey,
      routes: hasStetApiKey ? ['/', '/blog'] : [],
    },
  },
});

Commit the generated client so a keyless checkout still type-checks. Keep its imports in server routes and expose content to pages through server API routes, so the key never reaches the browser.

Link every content page

Render links to each collection entry from /blog. Nitro starts with / and /blog, follows those links, and writes the discovered pages during nuxt build. If Stet is unavailable while a key is configured, the build fails rather than deploying an incomplete site.

The Nuxt example is this guide as a running app.

Was this page helpful?