nuxt-typo3

# Content elements

# Base content element

📍 Each content element contain base and common props.

📍 Each content element has Ce prefix

Be aware of

To avoids conflicts with other UI libraries or your design system we use T3 prefix for all components. For instance new content elements should be named T3CeMycontentelement.

We use T3 prefix because some of our global components are not ContentElements e.g. T3NavLink

You don't have name your content elements component file this way, but this is imporant when you register them as global (look below).

Base props are used by render components (opens new window):

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

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

📍 Common props are related mainly with header, check shareProps (opens new window)

# Create own content element

We will create new custom ContentElement in our frontend application.

Be aware

We assume our API deliver new content element - with type "keyvisual".

{
  "id": 251,
  "type": "keyvisual",
  "appearance": {
    "layout": "default",
    "frameClass": "default",
    "spaceBefore": "",
    "spaceAfter": ""
  },
  "index": 3,
  "header": "Apple pie",
  "lead": "Don't you just love a lazy Sunday afternoon with a nice piece of pie and a freshly-brewed cup of coffee?\nThis apple pie recipe is simple and so good."
}
  1. to create new content element, you can use base content element (opens new window) mixin to inherit all common props.

components/T3CeKeyvisual.vue:

<template>
  <div>
    <strong> Hello {{ header }} and {{ lead }} </strong>
  </div>
</template>
<script>
import baseCe from '~typo3/mixins/component/baseCe.js'
export default {
  name: 'T3CeKeyvisual',
  extends: baseCe, // here is defined header prop
  props: {
    // lead should be delivered by API
    lead: {
      type: String,
      required: true
    }
  }
}
</script>
  1. Register your content elements as global component by plugin for Nuxt (opens new window). Create components.js in /plugins/ directory

components.js:

import Vue from 'vue'
import CeKeyvisual from '~/components/T3CeKeyvisual'

Vue.component('T3CeKeyvisual', CeKeyVisual)
  1. Setup nuxt configuration
export default {
  plugins: ['~/plugins/components']
}

# Autoimports

We support Nuxt auto-imports (opens new window).

If you have enabled this options (opens new window) you can skip points (2, 3) above.

← Form handling →