N
Nuxt•4d ago
JulienC

Can't import component from "@/components/MyComponent.vue

Hi, newbie to the discord so excuse me if I posted in the wrong channel. I'm tring to upgrade a nuxt project from 3.13 to 3.17 and the upgrade is breaking my imports. The doc says that the alias @ still is the default, so I don't understand the behavior. Thanks in advance
3 Replies
kapa.ai
kapa.ai•4d ago
Hi @JulienC. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that in Nuxt 3, the @ alias should point to the app root (which includes the components directory by default) and is still the default behavior. However, there have been some changes in recent Nuxt versions that may affect how components are imported and referenced. Key Points from the Knowledge Sources 1. Alias Behavior:
The @ alias in Nuxt 3 points to the app root (the same as @@ by default). This is confirmed in a Nuxt team member's response:
@ is the "app" folder, @@ is the root folder. In Nuxt 3, both are aliased the same way (as they are the same by default)
Nuxt 4 - alias not working in nuxt config 2. Component Auto-Import:
Nuxt 3 auto-imports components from the components/ directory, so you typically do not need to import them manually. You can use them directly in your templates without an explicit import statement.
Auto-imported Components 3. Normalized Component Names:
Starting with recent Nuxt versions, component names are normalized to match the Nuxt auto-import pattern. For example, a component at components/SomeFolder/MyComponent.vue will be auto-imported as SomeFolderMyComponent. If you are using manual imports or referencing component names in tests or <KeepAlive>, you may need to update the names you use.
Normalized Component Names If this normalization causes issues, you can disable it in your nuxt.config.ts: 
   export default defineNuxtConfig({
     experimental: {
       normalizeComponentNames: false
     }
   })
   
   export default defineNuxtConfig({
     experimental: {
       normalizeComponentNames: false
     }
   })
Upgrade Guide: Normalized Component Names Troubleshooting Steps - If you are trying to import a component manually (e.g., import MyComponent from "@/components/MyComponent.vue"), this should still work, but you may want to check: - That the file path is correct and matches the casing exactly. - That your editor/IDE has reloaded after the upgrade. - That there are no conflicting changes in your nuxt.config.ts regarding the components option. - If you are using auto-imports, you should be able to use <MyComponent /> directly in your templates without an import statement. - If you are running into issues after the upgrade, check if the new component name normalization is affecting your code, especially in tests or when using <KeepAlive>. Update your references as needed, or disable the normalization as shown above. If you continue to have issues, please provide the exact error message or a code snippet for more targeted help. --- In summary:
The @ alias should still work as before, but changes in component name normalization or auto-import behavior in Nuxt 3.17 may require you to update how you reference or import components, especially if you rely on manual imports or component names in tests or advanced features.
If you want to revert to the old behavior, you can disable the normalization feature in your config as shown above. Let me know if you need more specific troubleshooting! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@1369211009704788001> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
JulienC
JulienCOP•3d ago
@kapa.ai I'm importing this component in a pinia store btw, no idea if that's an important info.My path is correct, since it worked before, I restarted my IDE, no changes, my nuxt config doesn't specify anything about component so normal behavior i suppose It had to do with nuxt layers overwriting aliases in my project...

Did you find this page helpful?