Knowledgebase

Composables and Reusable Logic in Vue Print

  • frontenddevelopment, frontend, troubleshooting, guide, howto, solution, zillionkinghost, hosting
  • 0

Sharing behaviour.

WHAT A COMPOSABLE IS

A function encapsulating reactive logic, usable across components.

WHAT IT REPLACES

Mixing shared behaviour into components in ways that obscure its origin.

WHAT TO PUT IN ONE

State and logic belonging together: a data fetch, a form, a subscription, a browser API.

WHAT MAKES A GOOD ONE

One clear purpose Returns what the component needs Cleans up after itself

WHY CLEANUP MATTERS

Listeners and timers otherwise accumulate.

WHAT NAMING CONVENTION TO FOLLOW

The established prefix, so their nature is obvious.

WHAT TO AVOID

Composables doing several unrelated things Hidden dependencies on component context Shared state where local state was intended

THAT LAST POINT

State defined outside the composable function is shared by every caller, which is sometimes intended and frequently not.

WHAT TO ESTABLISH

Whether state should be per-instance or shared.

WHAT TO TEST

Composables independently, since they are plain functions.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot