estore-nuxt

SSR (universal) storefront for estore, built with Nuxt 4 / Vue 3. It targets the root-owned OpenAPI contract (../estore/contract/openapi.yaml), not any single backend — so the same app runs unchanged against the Laravel, Spring Boot, or .NET implementations.

Stack

• Nuxt 4 (SSR) + Vue 3 + vue-router
• Pinia (@pinia/nuxt) for state (auth, cart)
• openapi-typescript — generates app/types/api.ts from the contract; a thin typed wrapper over Nuxt's native $fetch / useFetch (no extra runtime client)
• pnpm

Getting started

pnpm install          # installs deps + runs `nuxt prepare`
cp .env.example .env  # then edit NUXT_PUBLIC_API_BASE if needed
pnpm dev              # http://localhost:3000

The frontend talks to the backend at NUXT_PUBLIC_API_BASE (default http://localhost:8000/api/v1, i.e. estore-laravel via php artisan serve).

Scripts

Script	Purpose
pnpm dev	Dev server (HMR)
pnpm build / pnpm preview	Production build / preview
pnpm gen:api	Regenerate app/types/api.ts from ../estore/contract/openapi.yaml
pnpm typecheck	vue-tsc type check across the app

app/types/api.ts is committed so the app builds out of the box. Re-run pnpm gen:api whenever the contract changes (it reads ../estore/contract, available in the monorepo checkout).

Layout (app/ srcDir)

app/
  composables/   useApi (imperative $fetch) · useApiFetch (SSR useFetch) · useTokens (cookies)
  stores/        auth · cart  (Pinia, auto-imported)
  types/         api.ts (generated) · index.ts (aliases)
  utils/         formatMoney · getProblem (RFC 9457 helper)
  layouts/       default (header/nav/footer)
  pages/         index · products/  (storefront skeleton)
  assets/css/    main.css

Auth & cart model

• The Sanctum bearer token and guest cart token live in cookies (useTokens) so SSR requests are authenticated. useApi attaches Authorization and X-Cart-Token.
• API errors carry the backend's RFC 9457 Problem Details body; read it with getProblem(err).

Roadmap (next)

Product detail · cart · checkout · login/register/account · minimal admin (catalog/offers/inventory/orders). UI generation may be assisted by the open-design tool.