Idea: rendering .vue.eex templates

It looks like You want to do server side rendering with vue.

I think it’s possible to put an intermediate node server that would interpret javascript and render html. Also in react, there is a render to string method, that helps doing SSR.

Otherwise, the Drab library can help You generate reactive frontend, from the server.

But I am not sure it would be easy for phoenix to take vue files, interpret js, and output html.

There are a few hurdles with your idea:

• EEx won’t parse custom templating. It’s “Embedded Elixir”, which comes down to elixir code within tags within arbitrary text.

• Phoenix can have other templating engines than eex, but it’s probably a lot of work to map vue templates to elixir code at compile time and your js bundle would still need the templates in js form for runtime updates of the markup. So besides a third party form of SSR (without hydration) it’s not really improving much.

• Just compiling the templates for usage with the lighter vue runtime basically means the vue templates are compiled into js functions. That’s imo a clear concern of a js bundler and not elixir. It’s still js, which comes out at the end.

SSR with vue can probably be more smoothly implemented by using it’s new (v 2.5) V8 compatible renderer within the beam or an external node instance on the same server. This can execute the SSR part of rendering vue components natively.

I wasn’t thinking about SSR. More about building a Vue tree inline in the html template and sending it to the client. The client then initializes automatically a Vue instance on the html body.

Imagine for example returning this template:

<body>
  <h1>Your Birth Date Picker</h1>
  <datepicker current-date="<%= Date.utc_today %>">
    <p>Please, <%= @username %>, insert your birth date</p>
  </datepicker>
</body>

But the datepicker vue component would be built from a .vue template file.

Having custom html markup injected into components is already possible by using inline-templates or slots, so I don’t really get what you expect the .vue.eex file to accomplish over a .vue file bundled into your js assets.

Indeed, I have a similar setup already. I guess my “problem” is that some eex file renders a template containing an inline vue component, which is somewhat connected to a css and a js file somewhere in my assets. Reading the Vue doc I found the idea of single file components (the .vue file) interesting to solve this, thinking that the file in web/template could contain all the markup / logic / styling colocated.

@LostKobrakai thanks for the elaborated answer.
I have got a doubt from your statement (“SSR with vue can probably be more smoothly implemented by using it’s new (v 2.5) V8 compatible renderer within the beam or an external node instance on the same server.”) and actually I am looking solution for this.
Doubt is :- how can i make sure that the vue rendering and processing will done within the beam ? coz at last this could be a bottle neck.
please do share your comments and any follow-up article/ code sample to achieve same.
Thanks.

There are v8 implementations for erlang out there, but I’ve not used them so I cannot say anything about their quality. To use them with vue SSR you probably need to put the pieces together on your own. I’m not aware of anyone having done that already.

I truly wish we can have vue.eex.