Scalable Architecture with the Vue 3 Composition API

The Composition API makes it easier to extract logic out of components and into reusable composables.

Draw clear composable boundaries

Each composable should have a single responsibility. Data fetching, form state and UI state should live in separate files.

export function useUser(id: Ref<string>) {
  const user = ref<User | null>(null)
  return { user }
}

Good architecture is the kind that does not make you ask "why did I do this?" six months later.