1

Lets say I have this simple structure as mounted Vue.js;

<div id="app">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
</div>

Normally vue.js mounted on

<div id="app"></div>

as empty and renders it later. And I have the exact content of main div of that specific page as like this;

<div id="main">
    <p>this is the only content</p>
</div>

How can I partial hydrate the main div? Can I just send page like this;

<div id="app">
    <div id="main">
        <p>this is the only content</p>
    </div>
</div>

and mount vue on it? or what is the way here? There won't be a node.js server in background.

Ünsal Korkmaz
  • 224
  • 4
  • 17
  • For static content you can use astro itself. Partial hydration is for interactive components. – saravana priyan Aug 26 '22 at 05:12
  • @saravanapriyan it seems what I was looking for was DOM Template Parsing Caveats: https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats – Ünsal Korkmaz Aug 26 '22 at 11:40

1 Answers1

1

Astro islands

Astro treats Frameworks like islands, each island is either fully hydrated or not. So what you can do is

  • in a .astro component or page, include top level tags that you want to handle separately from the island you want to hydrate at a specific event

  • split your code on multiple islands even if it is the same framework as long as they are included separately from a .astro file

Example

here an example with 3 islands

---
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div id="custom">
    <div id="header"></div>
    <div id="footer"></div>
    <MyVueComponent client:visible />
    <MyVueComponent client:visible />
    <MyVueComponent client:visible />
</div>

<script>
//hydration happens first and independently from the Vue islands
</script>

Reference Astro doc https://docs.astro.build/en/concepts/islands/

wassfila
  • 1,173
  • 8
  • 18