Understand Nuxt auto-imports, write your own reusable composables, and share logic across pages without import lines.
Why: Nuxt scans certain folders and makes their exports available everywhere — no import line to write. Vue APIs (ref, computed, watch) and Nuxt helpers (useFetch, useState, navigateTo) are all auto-imported too.
<!-- No imports needed for ref, computed, or useRoute -->
<script setup lang="ts">
const count = ref(0)
const double = computed(() => count.value * 2)
const route = useRoute()
</script>
<template>
<p>{{ double }} on {{ route.path }}</p>
</template>Why: a composable is a reusable function (named useXxx) that bundles related reactive logic. Drop it in app/composables and it’s auto-imported everywhere. Note: "composable" is just Vue’s word for a reusable piece of stateful logic.
// app/composables/useToggle.ts
export function useToggle(initial = false) {
const on = ref(initial)
const toggle = () => (on.value = !on.value)
return { on, toggle }
}Why: call it like any function — no import — and you get back its reactive values and methods. The same composable can be reused on any page.
<script setup lang="ts">
const { on, toggle } = useToggle()
</script>
<template>
<button @click="toggle">{{ on ? 'On' : 'Off' }}</button>
</template>Why: components in app/components are auto-imported too — just use the tag. A file at components/BaseButton.vue becomes <BaseButton />; nested folders become a prefix, e.g. components/blog/Card.vue is <BlogCard />.
app/components/BaseButton.vue -> <BaseButton /> app/components/blog/Card.vue -> <BlogCard />