Nuxt•2mo ago

Import component fail and can't use them

Hi ! I have some problem for a couple hours now and Google is no help 😮 I learn Nuxt 4 and I try this from the nuxt website : https://nuxt.com/docs/4.x/getting-started/views#components But when I try, Nuxt (or Vue) don't want to find my AppAlert component. And leave me with these kind of errors

 WARN  [Vue warn]: Failed to resolve component: AppAlert
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
  at <Anonymous>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Component <Anonymous> is missing template or render function.
  at <Anonymous>
  at <App>
  at <NuxtRoot>

 WARN  [Vue warn]: Failed to resolve component: AppAlert
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
  at <Anonymous>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Component <Anonymous> is missing template or render function.
  at <Anonymous>
  at <App>
  at <NuxtRoot>

And in browser console I have following screen. I tried some solutions from Google but without any resolve. If someone have an idea it would be really cool !

4 Replies

kapa.ai•2mo ago

Hi @Ggcool. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're following the Nuxt 4 documentation example for auto-imported components, but Nuxt/Vue can't find your AppAlert component and is showing warnings like "Failed to resolve component: AppAlert". Here are some things to check, based on the official Nuxt documentation: 1. Component Location and Naming
Make sure your AppAlert.vue file is inside the components/ directory at the root of your project. For example:

   -| components/
   ---| AppAlert.vue

   -| components/
   ---| AppAlert.vue

Nuxt will automatically import any components in this directory, and you should be able to use <AppAlert /> in your templates without importing it manually. The filename should match the component name you use in your template (case-sensitive) Nuxt components directory. 2. Component Template
Ensure your AppAlert.vue file has a valid template. For example:

   <template>
     <span>
       <slot />
     </span>
   </template>

   <template>
     <span>
       <slot />
     </span>
   </template>

If your component is missing a template or render function, you'll see the "Component <Anonymous> is missing template or render function" warning Nuxt views: components. 3. Restart the Dev Server
Sometimes, Nuxt needs a restart to pick up new files in the components/ directory. Stop and restart your development server. 4. Check for Typos
Double-check the spelling and casing of both the filename and the tag in your template. Nuxt uses PascalCase for auto-imported components. 5. No Manual Import Needed
You do not need to manually import components from the components/ directory in your script. Nuxt auto-imports them for you. 6. Example Usage
Your app.vue should look like this:

   <template>
     <div>
       <h1>Welcome to the homepage</h1>
       <AppAlert>
         This is an auto-imported component.
       </AppAlert>
     </div>
   </template>

   <template>
     <div>
       <h1>Welcome to the homepage</h1>
       <AppAlert>
         This is an auto-imported component.
       </AppAlert>
     </div>
   </template>

And your components/AppAlert.vue:

   <template>
     <span>
       <slot />
     </span>
   </template>

   <template>
     <span>
       <slot />
     </span>
   </template>

If you've checked all of the above and it still doesn't work, there may be a misconfiguration in your project. In that case, try creating a minimal reproduction or check your nuxt.config.ts for any custom components configuration that might interfere with auto-imports Nuxt auto-imports. If you continue to have issues, consider sharing your project structure and relevant code snippets for more targeted help. Let me know if this helps or if you need further assistance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@210746828851773440> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

GgcoolOP•2mo ago

As the bot asking this is my project structure in pic below, created by npm create nuxt@latest and I tried everything listed in the bot response... I'm out of ideas

GgcoolOP•2mo ago

It's okay, flapili told me in #french that the component folder must be in app and not in root ! It's good

Gaming

Programming

Import component fail and can't use them

Did you find this page helpful?