N
Nuxt•4w ago
Mike

Auto Imports vs. components/AppHeader.vue (?)

Hello guys, I am blocked with setting a new app due to the auto imports issue. In fact everything seems odd with Nuxt since yesterday night. Have you seen such err already?
No description
10 Replies
kapa.ai
kapa.ai•4w ago
Hi @Mike. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having issues with auto imports in your Nuxt application, particularly with components like AppHeader.vue. Let me help clarify how auto imports work in Nuxt and what might be causing your issue. Nuxt automatically imports components from your components/ directory, so files like components/AppHeader.vue should be available in your templates without explicit imports. This is part of Nuxt's "convention over configuration" approach. For example, if you have this structure: 
-| components/
---| AppHeader.vue
---| AppFooter.vue
-| components/
---| AppHeader.vue
---| AppFooter.vue
You can use these components directly in your templates: 
<template>
  <div>
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>
<template>
  <div>
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>
Without needing to import them explicitly Components Directory Structure. If you're experiencing issues with auto imports, here are some potential causes: 1. Component naming issues: Component names are based on their path and filename. For nested components, duplicate segments are removed. For example, components/base/foo/Button.vue would be available as <BaseFooButton /> Components Directory Structure. 2. Configuration issues: Check if you've modified the auto-import settings in your nuxt.config.ts file. You might have disabled auto-imports with settings like: 
   export default defineNuxtConfig({
     imports: {
       autoImport: false
     }
   })
   
   export default defineNuxtConfig({
     imports: {
       autoImport: false
     }
   })
Auto-imports Documentation 3. Dynamic components: If you're trying to use components dynamically with :is, you'll need to use resolveComponent or import them explicitly Components Documentation. If you're still having issues, you can always use explicit imports: 
<script setup>
import { AppHeader, AppFooter } from '#components'
</script>
<script setup>
import { AppHeader, AppFooter } from '#components'
</script>
Direct Imports Documentation Without more specific details about the error you're encountering, it's difficult to pinpoint the exact cause. Could you share the specific error message or behavior you're experiencing? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@657584859052638218> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Mike
MikeOP•4w ago
The solution is manually import to my layouts/default.vue - but why auto imports are not working ? 
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'
</script>

<template>
  <div>
    <AppHeader />
      <slot />
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'
</script>

<template>
  <div>
    <AppHeader />
      <slot />
    <AppFooter />
  </div>
</template>
Mike
MikeOP•4w ago
No description
Cue
Cue•4w ago
Probably don’t. Seems a bit sus 😂
HugoRCD
HugoRCD•4w ago
@Mike Would you be able to provide more information, such as the package.json, nuxt.config.ts, and so on?
Mike
MikeOP•4w ago
Hi Hugo, yup let me pull that out. My app.vue is at the root (I have seen your template has /app/app/vue dir organisation) this btw did not work neither, got err that app.vue cant be found. 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/eslint": "1.3.0",
    "@nuxt/fonts": "0.11.0",
    "@nuxt/icon": "1.11.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/ui": "3.0.2",
    "@nuxt/ui-pro": "^3.0.2",
    "@nuxtjs/i18n": "9.4.0",
    "eslint": "^9.0.0",
    "nuxt": "^3.16.2",
    "typescript": "^5.6.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
  "devDependencies": {
    "tailwindcss": "^4.1.0"
  }
}
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/eslint": "1.3.0",
    "@nuxt/fonts": "0.11.0",
    "@nuxt/icon": "1.11.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/ui": "3.0.2",
    "@nuxt/ui-pro": "^3.0.2",
    "@nuxtjs/i18n": "9.4.0",
    "eslint": "^9.0.0",
    "nuxt": "^3.16.2",
    "typescript": "^5.6.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
  "devDependencies": {
    "tailwindcss": "^4.1.0"
  }
}
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: [
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/ui-pro',
    '@nuxtjs/i18n'
  ],

  css: ['~/assets/css/main.css'],

  i18n: {
    bundle: {
      optimizeTranslationDirective: false // recommended by the Nuxt i18n team because it will be deprecated
    },
    defaultLocale: 'en',
    langDir: '../locales/',
    detectBrowserLanguage: false,
    lazy: true,
    locales: [
      {
        code: 'es',
        name: 'Español',
        file: 'es.json'
      },
      {
        code: 'en',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'fr',
        name: 'Français',
        file: 'fr.json'
      }
    ]
  }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: [
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/ui-pro',
    '@nuxtjs/i18n'
  ],

  css: ['~/assets/css/main.css'],

  i18n: {
    bundle: {
      optimizeTranslationDirective: false // recommended by the Nuxt i18n team because it will be deprecated
    },
    defaultLocale: 'en',
    langDir: '../locales/',
    detectBrowserLanguage: false,
    lazy: true,
    locales: [
      {
        code: 'es',
        name: 'Español',
        file: 'es.json'
      },
      {
        code: 'en',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'fr',
        name: 'Français',
        file: 'fr.json'
      }
    ]
  }
})
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'

</script>

<template>
  <div>
    <AppHeader />
    <UMain>
      <slot />
    </UMain>
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'

</script>

<template>
  <div>
    <AppHeader />
    <UMain>
      <slot />
    </UMain>
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
  import * as locales from '@nuxt/ui-pro/locale'
  import { useI18n } from '#i18n'
  const { locale } = useI18n()
</script>

<template>
  <div>
    <UApp :locale="locales[locale]">
    <NuxtLoadingIndicator color="red" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
  </div>
</template>
<script setup lang="ts">
  import * as locales from '@nuxt/ui-pro/locale'
  import { useI18n } from '#i18n'
  const { locale } = useI18n()
</script>

<template>
  <div>
    <UApp :locale="locales[locale]">
    <NuxtLoadingIndicator color="red" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
  </div>
</template>
HugoRCD
HugoRCD•4w ago
@Mike Ok so it's super strange because I don't necessarily see a problem at 1st sight, would it be possible to maybe give me a CodeSandebox or Stackblitz style reproduction or even a repo to investigate a bit more?
manniL
manniL•4w ago
@Mike typo in your components folder You see it here componenets
Mike
MikeOP•4w ago
@TheAlexLichter @HugoRCD thanks guys, proud to be a human 😆

Did you find this page helpful?