Astro and Vue 3 for High Performance Frontends

Module 1: Project setup options and architecture choices

• Astro project structure, integrations, and where Vue fits best
• Comparing Astro first, hybrid, and app like setup options
• Practical defaults for TypeScript, routing, aliases, and content organization
• Folder structure and naming patterns that scale in teams

Module 2: Vue 3 inside Astro with stable hydration

• Island architecture and how Astro hydrates Vue components
• Best practices for avoiding hydration mismatches known from Nuxt or Vue SSR
• Deciding what should stay static, what should hydrate, and when
• Client directives and their tradeoffs for interaction, timing, and bundle size

Module 3: Component slicing and layout strategy

• Component slicing atomic vs function based and when each works better
• Practical use of layouts for shells, content pages, and shared UI
• Composability with slots in Astro and cross component structure
• Shared patterns for page assembly without over nesting or duplication

Module 4: Reactivity decisions in Vue 3

• Practical use of ref, reactive, computed, and watcher
• Choosing the simplest reactive primitive for the problem
• Avoiding watcher overuse and keeping logic predictable
• Designing composables that remain easy to test and reuse