Phoenix templates colliding with a JavaScript templates

In Phoenix template, that should be

"job/#{ job.id }"

But I have never used Vue.

Aside:

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.

• Why You Should Avoid Vue.js DOM Templates
• DOM Template Parsing Caveats
• Common mistakes to avoid while working with Vue.js

That might be so but my issue is neither how I’m using Vue nor my FCP and TTI requirements but something more simple: How can I emulate

{% verbatim %}  
some javascript
{% endverbatim %}

I just used the above as an example.

Anyways thanks @peerreynders for your answer.

thanks @Kokolegorille, using an elixir comment - nice !

string interpolation actually.

String.Chars protocol.

Quite right thanks for the correction but out of desperation I also tried to use a comment to avoid evaluation but without success.

One of the issues is that in fact you aren’t trying this at all:

That case is covered by Phoenix.HTML.raw/1.

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:

  </article>
  <a href="job/{{ job.id }}">{{ job.name }}</a>
</section>

and

  </article>
  <template>
    <a href="job/{{ job.id }}">{{ job.name }}</a>
  </template>
</section>

and they rendered in the browser as expected verbatim - there is no collision.

Interactive Elixir (1.8.1) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> import Phoenix.HTML
Phoenix.HTML
iex(2)> job =  %{id: 1234, name: "research"}
%{id: 1234, name: "research"}
iex(3)> content = raw("{{ job.id }}")
{:safe, "{{ job.id }}"}
iex(4)> ~E(<a href="job/<%= job.id %>"><%= job.name %></a>) |> safe_to_string() |> IO.puts()
<a href="job/1234">research</a>
:ok
iex(5)> ~E(<a href="job/{{ job.id }}">{{ job.name }}</a>) |> safe_to_string() |> IO.puts()
<a href="job/{{ job.id }}">{{ job.name }}</a>
:ok
iex(6)> ~E(<a href="job/<%= content %>">{{ job.name }}</a>) |> safe_to_string() |> IO.puts()
<a href="job/{{ job.id }}">{{ job.name }}</a>
:ok
iex(7)>

Possibly the missing piece of the puzzle? Django template variables use the mustache syntax.

The EEx template tags are documented here.

If on the other hand you are trying to bind a client side value then maybe you need this:

<a v-bind:href="`job/${job.id}`">{{ job.name }}</a>

Phoenix templates use eex by default. Interpolation is done like this:

<a href="<%= @job.id %>"><%= @job.name %></a>

This assumes you passed an assign called job to the template ala render(conn, :show, job: job)

@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.

Many thanks to all.

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.