Separating frontend from backend with type safety
I want to be able to outsource the frontend without showing backend, but if I create layer from separate repo - the types are lost.
Is it possible at all and how is the best way to do it?
I use nuxthub and Cloudflare.
2 Replies
Hi @Rostislav. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There’s some related information about how Nuxt handles shared types, but nothing in the sources explicitly describes a fully separated “frontend repo + backend repo with shared type‑safety over Nuxt layers / Nuxthub / Cloudflare”. So I can only outline what’s hinted at, and not a complete best‑practice recipe.
From the sources:
- Nuxt 4 introduces a
The knowledge sources do not describe an official Nuxt feature that would automatically “sync” types between two separate repositories without exposing backend code. Typically, that would require some separate artifact (for example, a published type‑only package or generated OpenAPI/TS definitions), but that pattern is not covered in the documents you provided. So, based strictly on the sources: - It is supported to have strong type‑safety between frontend and backend when they live in the same (possibly layered) Nuxt project using the
shared/ directory whose .d.ts files are included in multiple TypeScript projects (tsconfig.json, tsconfig.app.json, tsconfig.server.json) so that types can be shared between client and server within a single Nuxt project.[[separate ts projects](https://github.com/nuxt/nuxt/pull/30665);[include shared types](https://github.com/nuxt/nuxt/pull/32594)]
- A bug was fixed where server types were not seeing shared/ definitions; this was resolved by including ../shared/**/*.d.ts in tsconfig.server.json, again assuming the shared types live inside the same codebase.[[include shared types](https://github.com/nuxt/nuxt/pull/32594)]
- There is also work on types/shared.d.ts and nuxt.shared.d.ts to ensure auto‑imports and shared utilities are type‑safe and available in all contexts (client, server, shared), but that also assumes one Nuxt project (or layered Nuxt projects where the shared folder is part of the layer graph), not two completely independent repositories.[[shared auto‑imports](https://github.com/nuxt/nuxt/pull/32671);[legacy tsconfig fix](https://github.com/nuxt/nuxt/pull/32528)]
The sources do not explain:
- How to keep type safety when your frontend is one Nuxt app and your backend is a completely separate deployment (e.g. Cloudflare Worker / Nuxthub backend) without giving the backend code to the frontend team.
- Any official workflow for “remote layer” where types are automatically pulled from another repository at build time.
Given that limitation, the only approach clearly suggested by the docs/PRs is:
- If you keep frontend and backend in the same Nuxt project or layered Nuxt project, you can:
- Put shared interfaces and RPC / API contracts into a shared/ directory (or a dedicated .d.ts / .ts file), and Nuxt will wire them into both client and server type contexts via the generated tsconfigs and nuxt.shared.d.ts.[[separate ts projects](https://github.com/nuxt/nuxt/pull/30665);[include shared types](https://github.com/nuxt/nuxt/pull/32594);[shared auto‑imports](https://github.com/nuxt/nuxt/pull/32671)]
- Or expose them through .d.ts type files that are part of the project (for example using the shared/ folder or types/ folder), so they are available everywhere but don’t expose implementation details.[[include shared types](https://github.com/nuxt/nuxt/pull/32594)]
For your specific requirement:
- Outsourcing frontend, hiding backend code, but keeping type safety across reposThe knowledge sources do not describe an official Nuxt feature that would automatically “sync” types between two separate repositories without exposing backend code. Typically, that would require some separate artifact (for example, a published type‑only package or generated OpenAPI/TS definitions), but that pattern is not covered in the documents you provided. So, based strictly on the sources: - It is supported to have strong type‑safety between frontend and backend when they live in the same (possibly layered) Nuxt project using the
shared/ directory and generated tsconfigs.[[separate ts projects](https://github.com/nuxt/nuxt/pull/30665);[include shared types](https://github.com/nuxt/nuxt/pull/32594)]
- The sources do not document how to achieve that when frontend and backend are completely separate repos where only the frontend is outsourced and the backend must remain hidden.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@699613345711521843> Kapa.ai is still learning and improving, please let me know how I did by reacting below.