在VueJS组件中运行TYPO3 Fluid

Question

我有一个VueJS组件，我正在尝试通过Fluid标签添加翻译文本。

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

标签在前端显示，但<f:translate>标签为空。

- vava

---

尝试在f:translate标签中添加extensionName参数。TYPO3可能不知道应从哪个扩展获取翻译。同时删除所有缓存。如果这是答案，请告诉我将其发布为答案。 - Aristeidis Karavas

我尝试过了，但不起作用。 - vava

Answer 1

假定方向 Fluid → Vue

这确实很棘手，因为Fluid不支持推理文本中的转义字符，如Vue或Angular等其他客户端框架中使用的{}。

情况	Fluid模板	渲染输出
1	{{item.value}}	ø
2	{{ item.value }}	{{ item.value }}
3	{{<f:comment/>item.value<f:comment/>}}	{{item.value}}

• 1：空字符串（我们已经知道了）
• 2：有效，只需在大括号和变量名之间添加空格
• 3：有效，因为<f:comment/>打破了Fluid内联模式（但它很丑陋）

假定方向 Vue → Fluid

不可能从Vue（客户端模板和文档片段）调用Fluid（服务器端渲染）。

替代方案，通过插槽组合两者

可以在由Web服务器提供的基础模板中使用Fluid，并使用插槽将内容注入Vue组件，请参见https://v2.vuejs.org/v2/guide/components-slots.html。

主Fluid模板：

<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 组件模板：

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

- Oliver Hader

Answer 2

我没有成功将Fluid集成到Vue中，我认为两者具有不同的渲染引擎，无法像我想要的那样同步。

我通过在另一个标签上添加<f:translate key="search.resultPage"/>作为data-attribute来解决这个问题（该标签未在vue中呈现），并在vue组件中获取翻译。

- vava