In a multi-page web app project, the server part runs on Node.js and Express. Marko is used as a template engine for server-side rendering. Example :
<h1>${ out.global.__('user.title') } </h1>
<form action="" method="POST">
<input type="text" name="firstname" value=(out.global.req.body.firstname || '')>
<if(out.global.err.firstname)>
<span class="error">$!{ out.global.err.firstname}</span>
</if>
</form>
I need to add JavaScript interactivity client side (for the moment there is no JS). The client-side JS need to be added by keeping the multi-page form which means no single page app.
The goal would be to compile and generate views server-side with Marko and then to send it to the browser where the Vue will "hydrate" the HTML to add interactivity. I don't know how to write that server-side.
(I know that we can use Vue.js or Marko as isomorphic/universal web app ("same" code/library for both server-side rendering and client-side rendering), but that's not the question)
I already added a html-elements.json to allow my Vue components tags with Marko.
But even with that, I don't get how the syntaxes of the two template engines could work together and not "collide". If I do :
<h1>${ out.global.__('user.title') } </h1>
<form action="" method="POST">
<input v-model="firstname" :type="type" name="firstname" value=(out.global.req.body.firstname || '')>
<if(out.global.err.firstname)>
<span class="error">$!{ out.global.err.firstname}</span>
</if>
</form>
The v-model will work, but the :type shortcut will crash the Marko compiler. This is one example, but there are probably a lot. Looks like writing Vue.js syntax in Marko files is not the solution.
I would like to know if it's possible to add Vue.js to the project client-side by keeping marko server-side and if yes where to begin / how to do ?
Hope this is clear, thank you in advance for your help.
