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
strapidatabase (seemy-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.