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.

Pisistratus

try to add the extensionName parameter as well in the f:translate tag. It might not know from which extension should TYPO3 get the translation from. Delete all Cache as well. If that is the answer just tell me to post it as an answer – Gerardgerardo

I tried that, but doesn't work – Pisistratus

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>

Atonsah

Answer 2

I didn't succeed to integrate Fluid on Vue, I think that both have different rendering engines and can not be synchronize as I wanted.

I solved this issue by adding <f:translate key="search.resultPage"/> as a data-attribute on another tag(that is not rendered in vue) and get that translates on vue component.

Pisistratus