Vue Composables: Architecture, Dependency Injection, Testing

Composables are the main way to share logic in Vue 3. Designing them well—clear responsibility, injectable dependencies, consistent return shape—makes them reusable and testable. This post covers architecture and testing patterns senior Vue engineers use.

Single responsibility and naming

One composable should do one thing well: e.g. useFetch, useLocalStorage, usePagination. Name with the use prefix and a verb or noun that describes the capability. Avoid composables that do fetching + routing + analytics; split them so each can be tested and reused independently. If a composable grows large, consider splitting by sub-responsibility (e.g. useAuth that uses useAuthState and useAuthActions).