Sharing types from Server to Client
In my nuxt project, I want to use drizzle-zod to generate types based on my database schema. Currently the schema file is in the server folder but the place I want to use the type is on the client ( in the app folder ). In order to properly do this would I need to move the drizzle schema to the shared folder or would I import the schema into a file in the shared folder, generate the type there and then export it?
5 Replies
Hi @Redeemr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To share types generated from your database schema (e.g., with drizzle-zod) between the server and client in a Nuxt project, you should place the relevant type definitions in the shared directory, not in the server directory. The shared directory is specifically designed for code (including types and utilities) that needs to be accessible from both the server (Nitro) and the client (Vue app).
Here’s how you can approach this:
- Do not import server-only code (like direct database access or Nitro/Vue-specific code) into the shared directory. The shared directory must only contain code that is safe to run in both environments.
- If your schema file contains only type definitions (or you can extract just the types), move or generate those types into
shared/types/. This way, both your server and client code can import and use them.
- If you need to generate types from a schema that lives in the server directory, you should generate the types into the shared directory (e.g., shared/types/your-schema.d.ts). Do not import server code directly into shared—only the types should be shared.
Example structure:
Key points:
- Only files in shared/utils/ and shared/types/ are auto-imported (with compatibilityVersion: 4 enabled), but you can always import from #shared/types manually if needed.
- Do not import server code into shared—extract or generate types into shared instead.
- Use the #shared alias to import types or utilities from the shared directory in both client and server code Nuxt shared directory docs.
So, you should generate the types in the shared directory and import them where needed, rather than importing server code into shared or client code.
The---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------shared/directory allows you to share code that can be used in both the Vue app and the Nitro server. Code in theshared/directory cannot import any Vue or Nitro code.
Only files in theshared/utils/andshared/types/directories will be auto-imported. Any other files you create in theshared/folder must be manually imported using the#sharedalias (automatically configured by Nuxt) Nuxt shared directory docs.
<@148338264934318081> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai I have never used declaration files so I am unsure of what the process of generating the types will be in such a setup. drizzle-zod requires passing the drizzle schema into a createSelectSchema function and then inferring the type of the schema using zod. What would this look like? what exactly would I be doing in the shared folder?
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources do not contain specific information or examples about using drizzle-zod, generating types with zod, or the exact process of creating and exporting types in the Nuxt shared directory for this use case. The documentation does explain that the shared/types directory is intended for type definitions that need to be accessible on both client and server, and that you should not import server-only code into shared. However, it does not provide a step-by-step example for your drizzle-zod scenario or how to generate declaration files in this context Nuxt shared directory docs.
If you need general guidance on how to structure shared types, you can place your type definitions (e.g., inferred Zod types) in
shared/types/ as .d.ts files, ensuring they do not import server-only code. But for the exact workflow with drizzle-zod, the knowledge sources do not provide enough detail.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@148338264934318081> Kapa.ai is still learning and improving, please let me know how I did by reacting below.