Run TYPO3 Fluid on VueJS component

user_7675165 0
Viewed 730

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.

fluid typo3 vue.js
2 Answers

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>
user_28541400

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.

user_76751650
Related