🗺️ Arquitetura da Stack FastAPI & Vue 3 Reativo

flowchart LR
    subgraph VUE ["Frontend: Vue 3 (Vite + TypeScript)"]
        COMP["Componente SFC (<script setup>) 🖼️"]
        PINIA["Pinia Store (Estado Global Reativo) 🍍"]
        AXIOS["Axios / Fetch Client 📡"]
        COMP --> PINIA --> AXIOS
    end

    subgraph FASTAPI ["Backend: Python FastAPI (Async ASGI)"]
        ROUTER["APIRouter (async def endpoints) 🚦"]
        PYDANTIC["Modelos Pydantic v2 (Validação Rust) 🛡️"]
        SQLA["SQLAlchemy 2.0 Async Session 💾"]
        ROUTER --> PYDANTIC --> SQLA
    end

    AXIOS ==>|JSON Tipado REST| ROUTER
    SQLA ==> DB[("PostgreSQL 🐘")]

    style VUE fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style FASTAPI fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff
    style PINIA fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style DB fill:#ede7f6,stroke:#512da8,stroke-width:1.5px

📖 Fundamentos e Aplicação

A combinação entre FastAPI no backend e Vue 3 no frontend oferece um dos ambientes de desenvolvimento mais rápidos, legíveis e com melhor experiência de desenvolvimento (Developer Experience - DX) do ecossistema Full Stack.

1. Backend com FastAPI e Python Assíncrono:

  • Rotas assíncronas com async def sobre o servidor ASGI Uvicorn.
  • Injeção de dependências nativa e elegante com Depends().
  • Sessões assíncronas com AsyncSession no SQLAlchemy 2.0.

2. Frontend com Vue 3 (Composition API) & Pinia:

  • <script setup lang="ts">: Código conciso com reatividade via ref() e computed().
  • Pinia: O gerenciador de estado oficial do Vue 3, com suporte nativo a TypeScript, DevTools e ações assíncronas simples.

🧭 Navegação Rápida

| 📖 Teoria | 📊 Slides | 🧠 Quiz | 💻 Exemplos | 🧩 Exercícios | | :— | :— | :— | :— | :— | | Ler Tópico | Ver Slides | Fazer Quiz | Ver Código | Praticar |

🧭 Navegação do Capítulo: ⬅️ Capítulo Anterior · 📚 Sumário do Módulo · ➡️ Próximo Capítulo