Strapi + Vue demo site

A minimal headless CMS demo: Strapi serves content and auth; Vue is the public website.

Prerequisites

• Node.js 20+
• PostgreSQL running with a strapi database (see my-strapi-project/.env)

Quick start

1. Strapi backend

cd my-strapi-project
npm install
npm run develop

Admin panel: http://localhost:1337/admin

On first boot, the app automatically:

• Sets API permissions (public vs authenticated)
• Creates demo user: demo@strapi-demo.local / Demo1234!
• Seeds Global, About, Blog posts, and Member Area content

2. Vue frontend

In a second terminal:

cd vue-project
npm install
npm run dev

Site: http://localhost:5173

Pages

Route	Content source	Access
/	Global (hero, site name)	Public
/about	About single type	Public
/blog	Blog Post collection	Public
/members	Member Area single type	Login required
/login	Strapi Users & Permissions	—

Editing content

Use Content Manager in the Strapi admin to change copy, blog posts, or member-only text. Refresh the Vue site to see updates (no frontend rebuild).

Production build

cd vue-project
npm run build
npm run preview

Set VITE_STRAPI_URL to your deployed Strapi URL when building the frontend.