Why a Full-Stack TypeScript Architecture?

For marketing landing pages, SaaS frontends, lead-generation sites, and medium-scale applications, maintaining two separate repositories and languages (e.g. React/Vue frontend + Laravel/Django backend) introduces needless overhead.

Nuxt Full-Stack vs. Separate React + Laravel

Aspect	Nuxt 4 Full-Stack (This Template)	Separate Laravel + SPA
Language	100% TypeScript across frontend & backend	TypeScript (Frontend) + PHP (Backend)
Type Safety	End-to-end sharing of Zod schemas & Drizzle types	Manual API sync or OpenAPI code generation
SSR & SEO	Built-in SSR / SSG out of the box	Requires Inertia.js or separate SSR server
Deployment	Single container or serverless edge function	Two deploys, CORS setup, PHP-FPM / Nginx
Maintenance	1 repository, 1 dependency manager, 1 dev command	2 repositories, Composer + npm/pnpm, dual CI/CD

When would you split to Laravel instead?

Splitting into a dedicated Laravel API makes sense when the backend expands into a large enterprise business system requiring:

Complex multi-tier permissions & roles
Laravel Filament admin ecosystem
Heavy multi-step queue workers & Horizon
Multiple independent client apps & mobile SDKs

Until that point, keeping everything in Nuxt 4 + Drizzle + MySQL delivers drastically higher shipping velocity and zero API drift.

Repository Architecture & Layout

nuxt-fullstack/
├── app/
│   ├── assets/
│   ├── components/
│   │   ├── ContactForm.vue
│   │   ├── NewsletterForm.vue
│   │   └── SystemStatusBadge.vue
│   ├── pages/
│   │   ├── index.vue
│   │   ├── about.vue
│   │   ├── contact.vue
│   │   └── dashboard.vue
│   └── app.vue
│
├── server/
│   ├── api/
│   │   ├── contact.post.ts
│   │   ├── newsletter.post.ts
│   │   ├── leads.get.ts
│   │   └── health.get.ts
│   ├── services/
│   │   ├── email.service.ts
│   │   ├── leads.service.ts
│   │   └── newsletter.service.ts
│   ├── repositories/
│   │   ├── leads.repository.ts
│   │   └── newsletter.repository.ts
│   └── utils/
│       ├── db.ts
│       ├── redis.ts
│       └── response.ts
│
├── db/
│   ├── schema/
│   │   ├── leads.ts
│   │   ├── newsletter.ts
│   │   ├── users.ts
│   │   └── index.ts
│   ├── migrations/
│   └── index.ts
│
├── shared/
│   ├── types/
│   │   └── index.ts
│   └── validation/
│       ├── contact.schema.ts
│       ├── newsletter.schema.ts
│       └── index.ts
│
├── docker-compose.yml
├── drizzle.config.ts
├── nuxt.config.ts
├── Dockerfile
└── package.json