Building a small and fast theme with Vue and Astro

A blog theme does not need to hand everything to client-side JavaScript. Posts, navigation, and SEO metadata can be generated at build time; only stateful pieces need hydration.

Keep the boundary clear

The page layout composes content, Vue components handle the menu and language switcher, and the data file describes posts. Each layer focuses on what it does best.

const interactiveParts = [
  'language-switcher',
  'mobile-navigation',
]

Clear boundaries make it easier to add search, dark mode, and a table of contents later.