Nuxt Static Demo

Nuxt Static Demo is a reference project that demonstrates how to build a fully static Nuxt.js site with Strapi as a headless CMS and enable content preview workflows.

What is Nuxt Static Demo?

Nuxt Static Demo is a demonstration project that pairs Nuxt.js with Strapi to produce a fully static website with an editorial preview workflow. It takes content managed in Strapi and turns it into pre-rendered HTML pages at build time, and it also shows how to display unpublished drafts to editors. The project is hosted on GitHub and has a live demo deployed at https://nsd.vercel.app.

Key Features

• Strapi content backend — Uses Strapi as the headless CMS, providing an admin panel for content editors and an API for the Nuxt front end.
• Full static generation — Runs Nuxt in full static mode, so pages are generated once at build time and can be served from any static host.
• Preview workflow — Implements draft preview so editors can see content changes before a new static build is published.
• Deployed on Vercel — The online demo is hosted on Vercel, which is a common deployment target for Nuxt static sites.
• Open source repository — The code is available on GitHub, making it a reference for your own Nuxt and Strapi projects.

Who is it for?

• Nuxt developers — who want a starter example of wiring Nuxt to Strapi for static content sites.
• Content editors — who need a preview mode to review drafts before they go live on the static site.
• Teams evaluating headless CMS setups — who want to see a concrete integration of Strapi with a Vue-based static site generator.

What can you do with it?

• Build a Strapi-powered static blog — set up Nuxt to fetch posts from Strapi and generate a static blog with no server required.
• Test preview workflows — experiment with how drafts can be displayed to editors without triggering a full rebuild.
• Deploy to Vercel or similar hosts — use the project as a template for deploying your own Nuxt static site.

How does it work?

The project connects a Nuxt.js front end to a Strapi backend. At build time, Nuxt fetches published content from Strapi and generates static pages for every route. For preview, the demo adds a route or endpoint that reads draft content directly from Strapi so editors can view changes before they are published and the static site is rebuilt.

FAQ

Is the Nuxt Static Demo open source?

Yes, the repository is publicly available on GitHub, so you can clone it, inspect the code, and adapt it for your own projects.

Does the demo work with any version of Strapi?

The demo was built for a specific Strapi version, but you can update the API calls in the Nuxt configuration to match the Strapi version you are using.

Where can I see the demo live?

A live version of the demo is hosted at https://nsd.vercel.app.