How to get TYPO3 plugin data with EXT:headless and EXT:nnrestapi

Question

I have created TYPO3 headless project, where I am using below environment.

TYPO3 - 12 LTS EXT:headless - v4.1.1 EXT:nnrestapi - v2.0.3

I have followed official document here top create new content element. And created new API endpoint with EXT:nnrestapi

Document: https://t3headless.macopedia.io/nuxt-typo3/from-scratch/new-ce

It shows newly created element in the TYPO3 backend, I added on page and working like charm. Now, in the frontend wrote typoscript to get content for the same.

I am getting below json response:

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

Which looks good, but when I wrote new component below way:

front/components/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])
  })
}

It should call my component (According to documentation). But, it still showing JSON response. What im doing wrong? Is there any approach for custom plugin?

Basically, I want to add plugin on the page which render Vue component as sofasticated extbase plugin and use Rest API endpoint with EXT:nnrestapi.

Answer 1

I'm not sure which version of nuxt-typo3 you are referring to. The code you presented refer to Nuxt2, while the documentation link you provided is for Nuxt3.

When it comes to matching Content Elements with Vue.js Components, the idea is the same.

Your backend returns a Content Element which has "type": "site_builder", so you should register your Vue.js Component with the same name, omitting the underscores, e.g., 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])
  })
}