Minima + Nuxt UI example

This is an example of using Minima as a headless CMS, with Nuxt and Nuxt UI on the front end. It's adapted from the Nuxt UI Portfolio template.

• Live example

How it works

• We generate a typed SDK from the Minima OpenAPI documentation using Hey API
• ./pages/[...path].vue is a catch-all route which hits the Minima API to fetch the resource for that path
• ./app/components/BodyRenderer.vue handles turning the Tiptap/ProseMirror JSON into Prose components, which you can read more about in Nuxt UI's typography documentation

Setup

Make sure to install the dependencies:

pnpm install

Copy the example .env:

cp .env.example .env

Create a public API key for your site by going to Settings -> API Keys in the Minima application and add it to .env:

NUXT_PUBLIC_MINIMA_PUBLIC_API_KEY=pub_abc123xyz987

Development Server

Start the development server on http://localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm build

Deploy to Cloudflare:

pnpm deploy:cloudflare

Check out the deployment documentation for more information.