A primeira decisão arquitetural é a estrutura de pastas. Ela serve como documentação viva:
quando você abre o repositório, já precisa entender onde fica o quê.

Uma estrutura consistente reduz acoplamento e evita o “espalhamento” de lógica em arquivos aleatórios.

Sugestão prática de organização para projetos Vue (com Vite ou similar):

// src/
src/
  app/
    App.vue
    routes.ts
  ui/
    components/
      BaseButton.vue
      BaseInput.vue
      Modal.vue
    layouts/
      AppLayout.vue
  features/
    auth/
      components/
        LoginForm.vue
      composables/
        useAuth.ts
      api/
        authApi.ts
      types.ts
    dashboard/
      components/
        StatsPanel.vue
      api/
        dashboardApi.ts
      composables/
        useDashboard.ts
  store/
    index.ts
    authStore.ts
  shared/
    composables/
      useDebounce.ts
    utils/
      format.ts
    constants/
      http.ts

Arquitetura é previsibilidade. Eu gosto de garantir um fluxo de dados “em linha”:
API → serviço/composable → estado → componente.

Na prática, eu separo:

• Camada de integração: functions que falam com HTTP (sem depender de componentes).
• Camada de orquestração: composables que combinam efeitos, validações e transformação de dados.
• Camada de estado: store (ou estado local) com regras de consistência.
• Camada de apresentação: componentes focados em UI e eventos do usuário.

Dica importante: reduza “efeitos colaterais” espalhados. Ao invés de buscar dados dentro de múltiplos componentes,
centralize a busca na composable ou no store da feature.

// features/auth/api/authApi.ts
export type LoginPayload = { email: string; password: string };

export async function loginApi(payload: LoginPayload) {
  const res = await fetch("/api/login", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(payload),
  });

  if (!res.ok) {
    const data = await res.json().catch(() => ({}));
    throw new Error(data?.message || "Falha ao realizar login");
  }

  return res.json() as Promise<{ token: string; user: { id: string; name: string } }>;
}

Um componente bom é previsível, reutilizável e fácil de testar. Eu divido a responsabilidade em três tipos:

Sobre slots: quando você percebe que precisa “trocar pedaços” do layout do componente
(ex.: cabeçalho, ações, conteúdo), use slots para manter o componente flexível sem criar variações duplicadas.

<!-- ui/components/Modal.vue -->
<template>
  <div v-if="open" class="overlay" @click.self="$emit('close')">
    <div class="modal" role="dialog" aria-modal="true">
      <header class="modal__header">
        <slot name="title"> </slot>
        <button class="x" type="button" @click="$emit('close')" aria-label="Fechar">✕</button>
      </header>

      <section class="modal__body">
        <slot />
      </section>

      <footer class="modal__footer">
        <slot name="actions"> </slot>
      </footer>
    </div>
  </div>
</template>

O maior risco arquitetural em Vue é tratar estado de forma “orgânica”: um pedaço aqui, outro ali,
e lógica espalhada entre eventos e lifecycle. Para evitar isso, eu sigo critérios objetivos.

Regra 1 — estado compartilhado fica na store

Se duas telas/partes dependem do mesmo dado (ex.: sessão, permissões, filtros persistentes), ele merece store.

Regra 2 — estado de UI local fica no componente

Modal aberto, formulário com valores temporários e toggles de interface podem ficar local,
desde que não virem “fonte de verdade” de domínio.

Regra 3 — derive ao invés de replicar

Sempre que possível, use computed/derivações para evitar duplicar lógica (ex.: “é válido” a partir de campos).

Exemplo completo (uma composable de feature que controla loading/erro, chama a API e expõe uma interface simples).

// features/auth/composables/useAuth.ts
import { ref, computed } from "vue";
import { loginApi, type LoginPayload } from "../api/authApi";

type AuthState = {
  loading: boolean;
  error: string | null;
  token: string | null;
};

export function useAuth() {
  const state = ref<AuthState>({
    loading: false,
    error: null,
    token: null,
  });

  const isAuthenticated = computed(() => !!state.value.token);

  async function login(payload: LoginPayload) {
    state.value.loading = true;
    state.value.error = null;

    try {
      const data = await loginApi(payload);
      state.value.token = data.token;
    } catch (err) {
      state.value.error = err instanceof Error ? err.message : "Erro inesperado";
      state.value.token = null;
    } finally {
      state.value.loading = false;
    }
  }

  function logout() {
    state.value = { loading: false, error: null, token: null };
  }

  return {
    state,
    isAuthenticated,
    login,
    logout,
  };
}