使用EXT:headless和EXT:nnrestapi获取TYPO3插件数据及组件渲染问题

一、前端未渲染Vue组件的常见原因 #

• 缺少组件类型识别逻辑：API返回的JSON未携带明确的组件标识（如component字段），前端无法判断该渲染哪个组件，直接输出了原始JSON。
• 组件注册失败：自定义Vue组件未全局注册，或局部注册后未在渲染逻辑中正确引用。
• API数据结构不符合预期：后端返回的JSON缺少props等组件所需的关键字段，导致前端无法触发组件渲染。
• 动态渲染逻辑缺失：前端仅做了JSON数据请求，未编写根据组件标识动态渲染对应Vue组件的代码。

二、通过EXT:nnrestapi实现Vue组件渲染的完整流程 #

后端（TYPO3）配置 #

1. 创建Extbase插件并注册

在ext_localconf.php中注册自定义插件：

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
    'MyExt',
    'MyPlugin',
    [
        \Vendor\MyExt\Controller\MyController::class => 'list,show',
    ],
    // 配置非缓存动作
    [
        \Vendor\MyExt\Controller\MyController::class => 'list',
    ]
);

2. 配置nnrestapi API端点

在扩展的Configuration/RequestHandlers/MyPlugin.yaml中定义API响应结构，明确返回前端组件标识和props数据：

route: '/myplugin/{uid}'
handler: 'Vendor\MyExt\Api\MyPluginApiHandler'
method: 'GET'
response:
  type: 'json'
  data:
    component: 'MyCustomVueComponent' # 对应前端组件名称
    props:
      title: '<%= data.title %>'
      items: '<%= data.items %>'

3. 编写API Handler处理业务逻辑

实现数据查询与转换，返回符合前端要求的结构：

namespace Vendor\MyExt\Api;

use Nng\Nnrestapi\Api\AbstractApiHandler;
use Vendor\MyExt\Domain\Repository\ItemRepository;

class MyPluginApiHandler extends AbstractApiHandler
{
    protected ItemRepository $itemRepository;

    public function __construct(ItemRepository $itemRepository)
    {
        $this->itemRepository = $itemRepository;
    }

    public function getAction($uid = null)
    {
        $items = $this->itemRepository->findAll();
        return [
            'title' => '自定义插件标题',
            'items' => $this->transformItems($items)
        ];
    }

    protected function transformItems($items)
    {
        $result = [];
        foreach ($items as $item) {
            $result[] = [
                'id' => $item->getUid(),
                'name' => $item->getName(),
                'content' => $item->getContent()
            ];
        }
        return $result;
    }
}

前端（Vue）实现 #

1. 注册自定义Vue组件

在main.js中全局注册组件：

import { createApp } from 'vue'
import App from './App.vue'
import MyCustomVueComponent from './components/MyCustomVueComponent.vue'

const app = createApp(App)
app.component('MyCustomVueComponent', MyCustomVueComponent)
app.mount('#app')

2. 编写动态渲染逻辑

请求API后，根据返回的component字段动态渲染组件：

<template>
  <div v-if="apiData">
    <component :is="apiData.component" v-bind="apiData.props" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const apiData = ref(null)

onMounted(async () => {
  try {
    const response = await axios.get('/api/myplugin/1')
    // 验证返回数据是否包含组件标识
    if (response.data.component) {
      apiData.value = response.data
    }
  } catch (error) {
    console.error('API请求失败:', error)
  }
})
</script>

3. 验证API返回结构

确保后端返回的JSON格式如下：

{
  "component": "MyCustomVueComponent",
  "props": {
    "title": "自定义插件标题",
    "items": [
      {"id":1,"name":"测试项1","content":"内容1"},
      {"id":2,"name":"测试项2","content":"内容2"}
    ]
  }
}

内容的提问来源于stack exchange，提问作者Geee