I have a specific requirement and I am exploring potential solutions using VueJS, as it offers the convenient feature of hydrating pre-rendered HTML from the server.
In my Vue components, I do not define a template within the .vue file, but I need them to attach (hydrate) to DOM elements seamlessly. My only concern is how to attach child components in this context.
Could you provide an example?
<div class="page-component">
<h1 v-text="pageTitle">Page Title</h1>
<div class="child-component">
<h2 v-text="childTitle">Child Title</h2>
</div>
</div>
I have two components: PageComponent, responsible for handling the v-text in the h1 element within the root DOM element with the class .page-component, and ChildComponent, which should attach to the DOM element with the class .child-component and deal with the v-text in the h2 element.
Currently, I am struggling to understand how to achieve this without explicitly defining a matching template in the .vue file. While I see that server-side rendering (SSR) with the vue SSR render package handles this correctly, I am looking for a way to create templateless components that utilize the rendered content from any server (note: I use a Java server and cannot rely on the npm SSR package). Additionally, I want to ensure that these components are attached correctly to their respective sections within the complete HTML document.
I attempted a solution where I instantiated a PageComponent and mounted it like this: new PageComponent().$mount('.page-component'). However, this approach led to issues when trying to interpolate Vue-related attributes, such as the v-text directives, resulting in conflicts with the ChildComponent's properties.
In conclusion, I am seeking a method to instruct the PageComponent to delegate interpolation control to a child component at a specific point in the DOM subtree, rather than attempting to handle interpolation independently.
I trust that my scenario is now clearer.