Nuxt Composables

Nuxt Composables

Creating reusable stateful logic via Vue Composition API.

Core Concepts

[composables.md](references/composables.md) - Patterns, naming, state management, best practices

[multi-step-state.md](references/multi-step-state.md) - SSR-safe shared state across routes via useState, deriving step from route.path, submit-with-side-effects, why caller owns loading

Singleton Pattern (Shared State)

State defined outside function persists across all callers:

// app/composables/useUser.ts
let user = ref()  // Singleton - shared across app

export default function useUser() {
  const setUser = (data: BaseEntity) => {
    user.value = User.hydrate(data)
  }
  const clearUser = () => { user.value = undefined }

  return { user, setUser, clearUser }
}

Factory Pattern (Fresh State)

State defined inside function - new instance per call:

// app/composables/useCounter.ts
export default function useCounter(initial = 0) {
  const count = ref(initial)  // Fresh per call
  const increment = () => count.value++
  const decrement = () => count.value--

  return { count, increment, decrement }
}

Naming & File Conventions

| Convention | Example | |------------|---------| | File name | useUser.ts, useCategories.ts | | Function | export default function useUser() | | Return | Always object { state, methods } | | Refs | Reactive: user, not userRef |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: leeovery
• Source: leeovery/agentic-skills
• License: MIT

Install and usage instructions live in the source repository linked above.