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.

Read More