Static Vue.js components instead of Astro components?

[edgy magnet]

This is a pretty basic question:

In Astro, you can use Vue.js components and not hydrate them.
So you could build static components either as Astro components or using a component framework and then not hydrate.

Why would you not want to do that?

I assume the rendering performance would suffer (significantly?)
❓

---

Optional context: the question came up because we also have a Vue.js SPA and it may be attractive to have all components in Vue.js with a Vue.js-only design system.
But it's probably a bad idea and we'd have to either put both Astro and Vue.js components in the design system or just markup and CSS and let the consumers create the corresponding simple components in thei framework.

[daring gull]

Hi @edgy magnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro allows you to use Vue.js components and choose whether to hydrate them or not. The decision to hydrate a component or not depends on whether you need interactivity in that component.

Astro components are HTML-only templating components with no client-side runtime. They are rendered onto the page without JavaScript if no client:* directive is provided. This makes them static and non-interactive, but they load extremely fast because they don't require any JavaScript to run in the browser (source (https://docs.astro.build/en/guides/troubleshooting/)).

On the other hand, Vue.js components (or components from any other JavaScript framework) can be made interactive by hydrating them. Hydration involves sending the component's JavaScript to the client, which makes the component interactive. This is done using the client:* directive in Astro (source (https://docs.astro.build/en/tutorial/6-islands/1/)).

However, hydrating a component does come with a performance cost. The more JavaScript you send to the client, the slower your page will load. This is why Astro recommends an "HTML-first, JavaScript-only-as-needed" approach. With Astro, you can build your site using Vue.js components, but only hydrate the ones that need interactivity. The rest of your site will remain as static, lightweight HTML, ensuring optimal loading times (source (https://astro.build/blog/introducing-astro/)).

In terms of your design system, it's possible to have both Astro and Vue.js components. However, if performance is a priority, it might be better to use Astro for static components and Vue.js for interactive ones. Alternatively, you could provide just the markup and CSS and let the consumers create the corresponding components in their preferred framework.

Remember, the goal of Astro is to ship less JavaScript and optimize loading times. So, while it's possible to build everything with Vue.js components and hydrate them all, it might not be the best approach if you want to achieve the fastest possible loading times.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: