The Strapi Photos App Frontend is a Nuxt 3 example project that demonstrates a photo sharing application frontend backed by Strapi, GraphQL, Postgres, and Cloudinary.
What is the Strapi Photos App Frontend?
This is a Nuxt 3 frontend starter that serves as a reference implementation for building photo sharing platforms. It consumes a Strapi-powered API through GraphQL, stores metadata in Postgres, and manages photos with Cloudinary. The repository follows the standard Nuxt 3 structure so you can adapt it into a larger application. Input requires a Strapi GraphQL endpoint and Cloudinary credentials; output is a runnable photo gallery frontend.
Key Features
- Nuxt 3 framework — built on Vue 3 with file-based routing, auto-imports, and server-side rendering.
- GraphQL integration — connects to a Strapi backend through GraphQL queries for fetching photo data.
- Postgres database — the reference backend uses PostgreSQL for storage of application data.
- Cloudinary image hosting — photo uploads and delivery are handled via Cloudinary's CDN and transformation APIs.
- Multiple package managers — setup instructions cover yarn, npm, and pnpm installation.
- Development server — run
npm run devfor hot-reload at http://localhost:3000. - Production build —
npm run buildcreates a production bundle;npm run previewtests it locally.
Who is it for?
- Nuxt developers learning full-stack integration: study how a Vue frontend talks to a headless CMS via GraphQL.
- Strapi users who need a ready-made frontend to pair with their Strapi photo backend.
- Photo sharing startups looking for a minimal starter to adapt into their own gallery application.
What can you do with it?
- Frontend developers: scaffold a photo gallery interface and wire it to Strapi's GraphQL API.
- Strapi backend developers: verify a Strapi API by viewing it from a modern Nuxt frontend.
- Hobbyists: quickly set up a photo sharing site using a modern Vue stack with cloud storage.
How does it work?
- Install dependencies with your preferred package manager (
yarn install,npm install, orpnpm install --shamefully-hoist). - Start the development server with
npm run dev, which serves the app at http://localhost:3000. - For production, run
npm run buildand thennpm run previewto access the compiled app locally.
FAQ
What tech stack does this template use?
The frontend is Nuxt 3 built on Vue 3. The reference backend uses Strapi as a headless CMS, GraphQL for queries, PostgreSQL for the database, and Cloudinary for image handling.
How do I install and run it?
Clone the repository, then install dependencies with yarn install, npm install, or pnpm install --shamefully-hoist. Start the dev server with npm run dev on http://localhost:3000.
Is this a full-stack template?
No, it is the frontend only. The repository description indicates the complete example uses a separate Strapi backend with GraphQL, Postgres, and Cloudinary, which you would need to set up yourself.
Does it require Cloudinary credentials?
Yes, a functional deployment would need Cloudinary account credentials and a Strapi endpoint. The readme does not include configuration steps for these, so you may need to consult Strapi and Cloudinary documentation.
