The template tag is part of Vue’s SFC spec and is expected to be in a .vue file which is an asset intended to be compiled before deployment by the front end build system (the Vue compiler turns it into pure JavaScript).
Any template tag rendered by EEx and served by Phoenix is going to be interpreted by the browser as a native content template element which is an entirely different beast.
Even if Vue can use the template content client side - you should aim to avoid any approach that requires that you use the Full build:
The full build includes the template compiler - i.e. the client needs to download more JavaScript delaying FCP and TTI.
More importantly that compiler has to run client-side to transform all the Vue templates in the page to Vue render (JavaScript) functions before the resulting DOM can be rendered - delaying FCP and TTI even more.
This makes it sound like you want to supply job.id from Elixir on the server side - but the mustache syntax suggests that job.id (and job.name) are supposed to be handled client-side by Vue.
Which begs the question - is job.id (and job.name) a server side Elixir value (to be handled by EEx/Phoenix) or a client-side JavaScript value (to be handled by Vue/browser)?
In a vanilla Phoenix app in index.html.eex I inserted both:
@peerreynders I’ve gone through the same process and arrived at the same point as you but I was offline for a while and didn’t see your subsequent post.
Many thanks for your help.
Thanks to this problem and everybody’s help I have a much better understanding of the Phoenix.Template.EExEngine which very different (and cool ) from others I’ve used.
One reason why I brought up those issues is that Vue.js is typically used to build an SPA.
In that case it is common to serve the SPA completely decoupled from Phoenix - which also leaves the option open to use Nuxt.js for SSR to pre-render Vue.js to improve client-side performance. Phoenix then acts simply as a JSON or GraqhQL server (with Absinthe) for the SPA.
Going down the Vue.js SPA road there really isn’t any use for EEx templating. EEx is more useful for building dynamic web pages. Now it is conceivable to use dynamic pages that include a component that uses Vue.js but that use case doesn’t seem to be all that common.