Where to put shared types in nuxt applications?
I have some types/interfaces I need across the application in 7/8 components. At first I put them in composables, but I don't really like having type files in composables, doesn't seem a good fit. What's the alternative?
2 Replies
Hi @enricopolanski. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, Nuxt 3.14+ introduced a new
shared/ directory specifically designed for sharing code between the Vue app and the Nitro server. This directory is an ideal place to put shared types and interfaces that you need across your application.
Here's how you can use the shared/ directory for your types:
1. Create a types/ folder inside the shared/ directory.
2. Place your shared type definitions in this folder.
For example:
The shared/types/ directory is auto-imported, which means you can use these types throughout your application without explicitly importing them.
This approach is supported by the following source:
Nuxt Documentation (https://nuxt.com/docs/guide/directory-structure/shared) states:
"Only files in the shared/utils/ and shared/types/ directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported."
By using the shared/types/ directory, you can keep your type definitions separate from your composables while still benefiting from auto-imports across your application.
If you need to use these types in nested directories or other parts of your application that aren't auto-imported, you can manually import them using the #shared alias:
This solution provides a clean and organized way to manage shared types in your Nuxt 3.14+ application, separate from your composables and other application logic.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@147977704522645504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.