← All notes

Answer: In Vue, a composable is a function that uses the Composition API to encapsulate and reuse stateful logic — state that changes over time, not a stateless formatter.

Side effects

A composable may perform side effects such as adding DOM event listeners or fetching data. The guide's rule is to register those in post-mount hooks such as onMounted() (especially under SSR) and to clean them up in onUnmounted().

Why setup() matters

Those hooks are lifecycle injection APIs. onMounted is created with createHook from the MOUNTED hook. onUnmounted is created with createHook from the UNMOUNTED hook. Lifecycle injection APIs can only be used during execution of setup(). Call a composable during setup() so those hooks can be registered.

See also

• vue-reactivity-fundamentals
• vue-lifecycle-hooks

Claims

• id: C1 claim: A composable is a function that uses the Composition API. source: S1 evidence: "a \"composable\" is a function that leverages Vue's Composition API"

• id: C2 claim: Composables should clean up side effects in onUnmounted(). source: S1 evidence: "Remember to clean up side effects in onUnmounted()."

• id: C3 claim: Lifecycle injection APIs can only be used during setup(). source: S2 evidence: "Lifecycle injection APIs can only be used during execution of setup()."

• id: C4 claim: onMounted is the injected MOUNTED hook. source: S2 evidence: "export const onMounted: CreateHook = createHook(LifecycleHooks.MOUNTED)"

Sources

• [S1] Composables. Vue.js docs. https://vuejs.org/guide/reusability/composables.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] runtime-core apiLifecycle. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/runtime-core/src/apiLifecycle.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_as22a4he,
  author = {{iinventedlight}},
  title = {{Vue composables reuse stateful logic with the Composition API}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-composables/},
  note = {Permanent ID iil:note:as22a4he. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-composables.md.