Components Rendering (i.E. headless_news)

[meincms]

Rendering a component with your configuration seems to work well as long as the component doesn't contain any camelcase.

For instance if I insert the plugin news combined with the headless_news, then the content is displayed only as default.

CeNews_pi1 doesn't work, --> {"type":"news_pi1","appearance":{"layout":..... CeNewsPi1 also not, it's leading to an error. --> plugins/components.js (5:8) error Identifier 'CeNews_pi1' is not in camel case camelcase

Any suggestions how to solve this?

[mercs600]

Ho @meincms this is common issue, vuejs according to style guides wants camelcase naming, but TYPO3 returns component types in ugly format...

Temporary solution is just disable this this rule for this file. Add it at the top of the file plugins/components.js:

/* eslint-disable camelcase */

[meincms]

@mercs600 thanks for your fast reply. There we go – great idea to disable camelcase in one file. In fact I've finally solved it by changing the Object-Key.

import CeBrintneyspears from '~/components/content/elements/CeBrintneyspears' 
import CeNews from '~/components/content/elements/CeNews'

 const components = {
    CeBrintneyspears,
    CeNews_pi1: CeNews
    ...

Probably this might help s.b. else to keep the eslint-rule enabled.

[kahl-dev]

If someone want to try another solution. You can support it Like this:

<!-- components/content/elements/CeNews.vue -->
<template>
  ...
</template>

<script>
import baseCe from '~typo3/components/content/mixins/baseCe'
export default {
  name: 'CeNews_pi1', // eslint-disable-line
  extends: baseCe
}
</script>

// ~/plugins/components.js
import Vue from 'vue'
import CeNews from '~/components/content/elements/CeNews'

 const components = {
    CeNews,
}

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