[Vuejs]-How to dynamically render vuejs components in an astro page using a global variable?

by

0👍

✅

The best way is to probably move all these Vue components inside a single wrapper Vue component so that you can take advantage of Vue’s ways of handling interactivity.

index.astro might look something like this with a single hydrated <Steps /> component:

---
import Layout from "../layouts/Layout.astro";
import Header from "../components/header.vue";
import Steps from "../components/vehicule/steps.vue";
---

<Layout title="Welcome to Astro.">
    <main>
        <Header client:load />
        <Steps client:load />
    </main>
</Layout>

You would then use the vehicule, owner, and informations components inside this single steps manager.

Leave a comment