Showing posts with label Nuxt. Show all posts
Showing posts with label Nuxt. Show all posts

Thursday, November 27, 2025

Nuxt Ui failed to resolve the component issue

While working on a Nuxt project with nuxt ui, we might get the issue as below:

Failed to resolve component: UContentNavigation
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement



This warning means the Nuxt can't find the desired component. This will impact the component, which will not render in HTML. In order to resolve the issue, we need to configure the nuxt-ui inside the nuxt.config.ts file


  ui: {
    content: true
  },
  

This setup will provide the custom component available inside the core 'content directory of the nuxt-ui project. For example: UContentNavigation, UContentProse, etc

Share:

Tuesday, July 29, 2025

No import alias found in your tsconfig file in Nuxt Vue

While working on a Nuxt Vue project with Shadcn ui library, we might get the error while running the command npx shadcn-vue@latest init as below:

✔ Preflight checks.
✔ Verifying framework. Found Nuxt.
✔ Validating Tailwind CSS config. Found v4.
✖ Validating import alias.
                                                                                                                                                                                              2:42:25 PM
No import alias found in your tsconfig.json file.                                                                                                                                             2:42:25 PM
Visit https://shadcn-vue.com/docs/installation/nuxt to learn how to set an import alias.  

It indicates that the import alias is missing from the file tsconfig.json, i.,e the path to the directory that needs to be configured by the shadcn is missing, so we need to manually add the path scripts in the file.

To resolve this issue, we need to add the following project directory inside the tsconfig.json file

"compilerOptions": {
    "paths": {
      "@/*": ["./app/*"]
    },
  }

Note: here, the root app directory is app, so we used the same. In some projects, it might be the src directory.

Now run the application the error will be gone.

Share: