Shadcn + nuxt v4
Anyone has had any issues with shadcn, installing modules seems to throw errors I am not sure what it is related to.
11 Replies
Hi @! TheDharmaInitiative. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There is some information in the knowledge sources about issues related to using shadcn with Nuxt v4. Specifically, there was a problem with module resolution that affected shadcn-vue and other modules. The root cause was that Nuxt's internal module resolver (
jiti.esmResolve) would fall back to CommonJS resolution, which could lead to errors when installing or importing certain modules like shadcn. This issue was addressed in a Nuxt pull request that improved the module resolution logic and error handling, making it more robust and less likely to fall back to problematic paths. The fix is included in recent Nuxt releases, so upgrading to the latest version of Nuxt v4 should resolve these issues if you are encountering them when installing shadcn modules fix(kit): use mlly to resolve module paths to avoid cjs fallback.
If you are still experiencing errors after upgrading, please provide more details or error messages for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1087130175872979014> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai This seems to be a problem with the fact that the new structure of the folders is now inside app, and the aliases in the shadcn-config expect a relative path
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, your observation is correct and aligns with the changes introduced in Nuxt v4. In Nuxt v4, the default source directory is now app/, and the ~ alias points to this app/ directory. This means that any configuration or code (including shadcn config) that expects paths relative to the project root or uses the old alias behavior may break or resolve incorrectly.
For example, if shadcn-config expects to resolve files using ~ as the project root, it will now point to app/ instead, which can cause issues if your files are not structured accordingly. This is a significant change and is highlighted in the Nuxt v4 migration guide:
With this new structure, the ~ alias now points to the app/ directory by default (your srcDir). This means ~/components resolves to app/components/, ~/pages to app/pages/, etc.New Directory Structure – Nuxt v4 Upgrade Guide To resolve this, you may need to update your shadcn config to use the correct paths or adjust your aliases. If you need to refer to the project root, you can use the ~~ alias, which points to the root directory, while ~ points to app/ in Nuxt v4. This distinction is important for compatibility with third-party tools and configs that expect a certain directory structure or alias behavior. If you continue to have issues, ensure that your shadcn config and any related imports are updated to match the new Nuxt v4 directory and alias conventions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@1087130175872979014> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai components.json file
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, your components.json file for shadcn-vue is using aliases like "@/app/components". In Nuxt v4, the @ and ~ aliases now point to the app/ directory by default, not the project root. This means that "@/app/components" would actually resolve to app/app/components, which is likely not what you want.
Instead, you should update your aliases to match the new Nuxt v4 structure. For example:
This way, "@/components" will correctly resolve to app/components/ in your Nuxt v4 project, as per the new alias behavior New Directory Structure – Nuxt v4 Upgrade Guide and Nuxt Config: alias.
If you need to reference the project root, use the @@ or ~~ aliases, which point to the root directory, not app/. Be sure to update any other paths in your configuration or code that may be affected by this change.
If you continue to have issues, double-check that your directory structure matches the new Nuxt v4 layout and that your aliases are consistent with how Nuxt now resolves them.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@1087130175872979014> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai npx shadcn-vue@latest add accordion
11:54:39 AM
Something went wrong. Please check the error below for more details. 11:54:39 AM
If the problem persists, please open an issue on GitHub. 11:54:39 AM
11:54:39 AM
Validation failed: 11:54:39 AM
- resolvedPaths: Required,Required,Required,Required,Required 11:54:39 AM
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources provided, there is no explicit documentation about the shadcn-vue CLI integration with Nuxt v4 or the specific error message you are encountering (
- The error is likely related to path resolution and alias changes in Nuxt v4. - Update your aliases in
Validation failed: - resolvedPaths: Required,Required,Required,Required,Required). However, the sources do confirm that Nuxt v4 changed the default directory structure and alias resolution: the @ and ~ aliases now point to the app/ directory, not the project root. This can cause issues with tools or configs (like shadcn-vue) that expect the old alias behavior or a different directory structure New Directory Structure – Nuxt v4 Upgrade Guide.
Your current components.json uses aliases such as "components": "@/app/components", which, under Nuxt v4, would resolve incorrectly (to app/app/components). The correct alias should be "components": "@/components", which resolves to app/components in Nuxt v4.
However, the knowledge sources do not provide details about the internal validation or requirements of shadcn-vue's CLI, nor do they mention a resolvedPaths property or how shadcn-vue expects to resolve these paths in a Nuxt v4 project. Therefore, I cannot provide a definitive solution for this specific error based solely on the provided sources.
Summary:- The error is likely related to path resolution and alias changes in Nuxt v4. - Update your aliases in
components.json to match the new Nuxt v4 structure (e.g., "components": "@/components").
- If the problem persists, the knowledge sources do not contain enough information to provide a more specific solution for the shadcn-vue CLI error.
If you need further help, you may need to consult shadcn-vue's documentation or open an issue on their GitHub, as suggested by the error message.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1087130175872979014> Kapa.ai is still learning and improving, please let me know how I did by reacting below.