如何使用 EXT:headless 和 EXT:nnrestapi 获取 TYPO3 插件数据

Question

我创建了 TYPO3 无头项目，我正在使用以下环境。

TYPO3 - 12 LTS EXT：无头 - v4.1.1 扩展：nnrestapi - v2.0.3

我已按照此处的官方文档创建新的内容元素。并使用 EXT:nnrestapi

创建了新的 API 端点

文档：https://t3headless.macopedia.io/nuxt-typo3/from-scratch/new-ce

它显示了 TYPO3 后端中新创建的元素，我在页面上添加了这些元素，并且像魅力一样工作。现在，在前端编写了打字稿来获取相同的内容。

我收到以下 json 响应：

{
  "id": 120,
  "type": "site_builder",
  "appearance": {
    "layout": "default",
    "frameClass": "default",
    "spaceBefore": "",
    "spaceAfter": ""
  },
  "index": 1,
  "header": "Website builder"
}

这看起来不错，但是当我用下面的方式编写新组件时：

前端/组件/T3C/T3CeSiteBuilder/T3CeSiteBuilder.vue

<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>
<script>
import baseCe from '~typo3/mixins/component/baseCe.js'
export default {
  name: 'T3CeSiteBuilder',
  extends: baseCe,
  props: {      
    header: { type: String },
  }
}
</script>

front/plugins/components.js

import Vue from 'vue'

import T3CeBuilder from '~/components/T3C/T3CeSiteBuilder/'

// All the components
const components = {
  T3CeText,
  T3CeBuilder
}

// Register components
export default ({ app }) => {
  Object.keys(components).forEach((key) => {
    Vue.component(key, components[key])
  })
}

它应该调用我的组件（根据文档）。但是，它仍然显示 JSON 响应。我做错了什么？有没有自定义插件的方法？

基本上，我想在页面上添加插件，将 Vue 组件渲染为 sofasticated extbase 插件，并使用带有 EXT:nnrestapi 的 Rest API 端点。

Answer 1

您的后端返回一个具有

"type": "site_builder"

的内容元素，因此您应该使用相同的名称注册您的 Vue.js 组件，省略下划线，例如

T3CeSiteBuilder

。

import Vue from 'vue'

import T3CeSiteBuilder from '~/components/T3C/T3CeSiteBuilder/T3CeSiteBuilder.vue'

// All the components
const components = {
  T3CeText,
  T3CeSiteBuilder
}

// Register components
export default ({ app }) => {
  Object.keys(components).forEach((key) => {
    Vue.component(key, components[key])
  })
}