Auto-Imported Composables

Files in composables/ have their named exports auto-imported. Vue's core composables and Nuxt's runtime helpers are too.

4 min read Level 2/5 #nuxt#composables#auto-import

What you'll learn

Drop a composables/useUser.ts file with named exports
Use useUser everywhere without imports
Recognize Nuxt and Vue's curated auto-import list

In Vue, a composable is a function that wraps reactive state and reusable logic. Nuxt amplifies the pattern by auto-importing everything in composables/ — you just use the function.

A First Composable

// composables/useUser.ts
interface User {
  id: string
  name: string
}

export const useUser = () => {
  return useState<User | null>('user', () => null)
}

useState is Nuxt’s SSR-safe equivalent of ref. Now any page or component can call useUser():

<script setup lang="ts">
const user = useUser()

function signIn() {
  user.value = { id: '1', name: 'Ada' }
}
</script>

<template>
  <button v-if="!user" @click="signIn">Sign in</button>
  <p v-else>Hello, {{ user.name }}</p>
</template>

Multiple Named Exports

A single file can expose several composables — every named export becomes available.

// composables/auth.ts
export const useUser = () => useState<User | null>('user', () => null)
export const useIsAuthed = () => computed(() => useUser().value !== null)
export const signOut = () => { useUser().value = null }

All three (useUser, useIsAuthed, signOut) are now globally available.

The Free List

You don’t need to import any of these — Nuxt registers them everywhere:

Vue reactivity — ref, reactive, computed, watch, watchEffect, onMounted, and friends.
Nuxt runtime — useFetch, useAsyncData, useState, useRoute, useRouter, navigateTo, useRuntimeConfig.
Your own — every file in composables/ and utils/.

Press through to nuxt.config.ts next to see how to fine-tune what gets imported.

nuxt.config.ts →