Module resolution error for '@' alias when importing Vue components

Question

The goal is to understand why a Nuxt 3 deployment build log shows a module resolution error stating that the alias '@' cannot be resolved for a Vue component import during the build step.

This failure appears to depend on whether the alias is defined in nuxt.config.ts, and it may differ between Nuxt 2 (webpack) and Nuxt 3 (Vite) builds. It remains uncertain whether the alias must be declared explicitly or can be inferred from tsconfig path mappings, and whether the error is triggered only for absolute imports using '@' or also for relative imports.

What is the correct way to define the '@' alias in nuxt.config.ts for a Vite‑based Nuxt 3 project?
Does omitting the alias cause the build to fail only for absolute imports that use '@', or does it also affect relative imports?
How does the module resolver behave when the alias is missing in a Nuxt 2 (webpack) project compared to a Nuxt 3 (Vite) project?

Tasadduq Burney · Answer

Module resolution error for '@' alias in Nuxt 2 vs Nuxt 3
Nuxt 3 (Vite) – explicit alias required
The Vite-based resolver in Nuxt 3 does not automatically merge tsconfig path mappings. The '@' alias must be declared in nuxt.config.ts under the alias property.
Add the alias entry to nuxt.config.ts:Run nuxt build and confirm the build log contains no resolution errors.If using TypeScript, verify that @ path aliases also appear in tsconfig.json for editor support, though they do not affect the build resolver unless explicitly merged.
Nuxt 2 (webpack) – configuration varies
Nuxt 2 relies on webpack's resolve.alias. The alias may be inferred if the webpack path plugin is present, but explicit configuration in nuxt.config.ts under the build section is recommended for consistent builds.
Relative imports (e.g., ./Component.vue) are unaffected by the presence or absence of the '@' alias in both Nuxt 2 and Nuxt 3.
Project versionAlias resolutionRelative importsNuxt 3 (Vite)Requires explicit alias in nuxt.config.ts; tsconfig paths not mergedUnaffectedNuxt 2 (webpack)May resolve via webpack plugin or explicit build.aliases; tsconfig paths possible with pluginUnaffected
Missing diagnostic detail: Which Nuxt version and build mode (SSR, SPA, or static) are you using? This determines whether the alias or build.aliases field applies and whether the error appears only in production builds.

Module resolution error for '@' alias when importing Vue components

1 answer

Module resolution error for '@' alias in Nuxt 2 vs Nuxt 3

Nuxt 3 (Vite) – explicit alias required

Nuxt 2 (webpack) – configuration varies

Your perspective belongs here.

0 question comments

Project version	Alias resolution	Relative imports
Nuxt 3 (Vite)	Requires explicit `alias` in `nuxt.config.ts`; `tsconfig` paths not merged	Unaffected
Nuxt 2 (webpack)	May resolve via `webpack` plugin or explicit `build.aliases`; `tsconfig` paths possible with plugin	Unaffected