I recently worked on a project where I needed both Astro and Vue Router to work together. The challenge was to make sure Astro didn’t interfere with Vue’s routing. Adding a Vue component to an Astro page—like a calculator or an editor—is easy, but using Vue Router required a different approach.
The primary reason for this setup was the need to separate static content pages from a Single Page Application (SPA). I didn’t want the ever-growing content to be part of an SPA. While I’m aware of Vue Router’s lazy loading capabilities, they weren’t a suitable alternative in this case, nor did the project require a micro-frontend approach.
Looking at the code for a Vue-powered SPA page within Astro src/pages/some/[…slug.astro], it becomes clear that Astro requires static paths, while the Vue portion functions like a standard SPA:
export function getStaticPaths() {
return [{ params: { slug: undefined } }, { params: { slug: "about" } }];
}
There’s no hidden complexity in the repository — just a clean separation of static and dynamic content.
At this point, I see Astro as an excellent tool for managing both static and dynamic content within the same project.