Auto Imports

Source
This example demonstrates the auto-imports feature in Nuxt.
app.vue
Open docs
<script setup>
const message = ref('Nuxt')

function hello() {
  sayHello(message.value)
}
</script>

<template>
  <NuxtExample dir="features/auto-imports">
    <h1>Demo with auto imports</h1>
    <form
      class="flex gap-2"
      @submit.prevent="hello"
    >
      <CustomInput v-model="message" />
      <UButton type="submit">
        Hello
      </UButton>
    </form>
  </NuxtExample>
</template>
https://auto-imports.example.nuxt.space

Example of the auto-imports feature in Nuxt with:

  • Vue components in the components/ directory are auto-imported and can be used directly in your templates.
  • Vue composables in the composables/ directory are auto-imported and can be used directly in your templates and JS/TS files.
  • JS/TS variables and functions in the utils/ directory are auto-imported and can be used directly in your templates and JS/TS files.
Read more in Docs > Guide > Directory Structure > Components.
Read more in Docs > Guide > Directory Structure > Composables.
Read more in Docs > Guide > Directory Structure > Utils.