自动导入

源码
此示例演示了 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

Nuxt 中自动导入功能的示例，包含：

  • components/ 目录中的 Vue 组件会自动导入，并且可以直接在模板中使用。
  • composables/ 目录中的 Vue composables 会自动导入，并且可以直接在模板和 JS/TS 文件中使用。
  • utils/ 目录中的 JS/TS 变量和函数会自动导入，并且可以直接在模板和 JS/TS 文件中使用。
在 Docs > Guide > Directory Structure > Components 中查看详情
在 Docs > Guide > Directory Structure > Composables 中查看详情
在 Docs > Guide > Directory Structure > Utils 中查看详情