Run TYPO3 Fluid on VueJS component

Question

I have a VueJS component and I'm trying to add translated text via Fluid tag.

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
  <h2><f:translate key="search.resultPage"/>"{{mutatedQuery}}".</h2>
</div>

The tags are displayed on frontend, but the <f:translate> tag is empty.

Answer 1

Assumed direction Fluid → Vue

Indeed that's tricky since Fluid does not support escape characters for inference literals like {} which are used in any other client-side frameworks like Vue or Angular as well.

case	Fluid template	rendered output
1	{{item.value}}	ø
2	{{ item.value }}	{{ item.value }}
3	{{<f:comment/>item.value<f:comment/>}}	{{item.value}}

• 1: empty string (we knew that already)
• 2: works, adding space between braces and variable name
• 3: works, since <f:comment/> breaks Fluid inline pattern (but it's "ugly")

Assumed Direction Vue → Fluid

It is not possible to call Fluid (server-side rendering) from Vue (client-side template & document fragment).

Alternative, combining both via slots

It is possible to use Fluid in the base template served by a web server and use slots to inject the content to Vue components, see https://v2.vuejs.org/v2/guide/components-slots.html.

Main Fluid template:

<div
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">

  <my-app>
    <template v-slot:resultPageLabel>
      <f:translate key="search.resultPage"/>
    </template>
  </my-app>
</div>

Vue my-app component template:

<h2>
  <slot name="resultPageLabel"></slot>
  "{{mutatedQuery}}".
</h2>