Nuxt•6d ago

Make explicit auto import of a component

<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

const show = ref(false)
</script>

is this possible?
import { main as Logo } from '#components/navbar/logo/main.vue'

<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

const show = ref(false)
</script>

is this possible?
import { main as Logo } from '#components/navbar/logo/main.vue'

3 Replies

kapa.ai•6d ago

Hi @IsaacR943. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to make explicit auto imports of components in Nuxt, including the example you provided. However, there's a slight modification needed in your second import statement. Here's the correct way to do it:

<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'
import { default as Logo } from '#components/navbar/logo/main.vue'

const show = ref(false)
</script>

<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'
import { default as Logo } from '#components/navbar/logo/main.vue'

const show = ref(false)
</script>

In Nuxt, you can use the #components alias to explicitly import components as shown in the Nuxt documentation (https://nuxt.com/docs/guide/directory-structure/components#direct-imports). This allows you to bypass Nuxt's auto-importing functionality when needed. For your specific case with the Logo component, you should import it as the default export rather than named export 'main'. Vue single-file components typically export their content as the default export. It's worth noting that while explicit imports are possible, Nuxt's auto-import feature is designed to reduce the need for manual imports in most cases. Components in the components/ directory are automatically imported (https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components), making them available throughout your application without explicit import statements. If you find yourself needing to use explicit imports frequently, you might want to consider adjusting your project structure or component naming conventions to better leverage Nuxt's auto-import capabilities. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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

IsaacR943OP•6d ago

update - a turn around is doing something like

import { NavbarLogoMain as Logo } from '#components'

import { NavbarLogoMain as Logo } from '#components'

Gaming

Programming

Make explicit auto import of a component