# Content elements

# Base content element

📍 Each content element contain base and common props.

📍 Each content element has Ce prefix ( We would like to avoid conflicts with other libraries or with your UI components )

Base props are used by render components:

 props: {
    ...{
      id: this.data.uid,
      type: this.data.type,
      appearance: this.data.appearance
    },
    ...this.data.content
 }

📍 this.data.content contains all custom props shipped by API

📍 Common props are related mainly with header, check shareProps

# Create own content element

  1. Create component, you can use base content element mixin to inherit all common props.

CeText.vue:

<template>
  <div>
    <strong> Hello {{ header }} </strong>
  </div>
</template>
<script>
import baseCe from '~typo3/components/content/elements/baseCe'
export default {
  name: 'CeText',
  extends: baseCe
}
</script>
  1. Register your content elements as plugin for Nuxt. Create components.js in /plugins/ directory

components.js:

import Vue from 'vue'
import CeText from '~/components/content/elements/CeText'

const components = {
  CeText
}

export default ({ app }) => {
  Object.keys(components).forEach(key => {
    Vue.component(key, components[key])
  })
}
  1. Setup nuxt configuration
export default {
  plugins: ['~/plugins/components']
}

To render this content element your API should returns content element with type text