Override Content Element

nuxt-typo3 provides core content elements with basic logic and markup by default. While you can style these elements to match your design, there might be instances where you need to override both the HTML markup and the JavaScript logic. This guide explains how to accomplish this.

Unified Approach for Overriding CSS/Markup and JavaScript

To override any aspect of a content element, whether it's CSS, markup, or JavaScript logic, follow these steps:

  1. Create a Component with the Same Name: In your project, create a component with the same name as the one you want to override. For example, if you're overriding T3CeText, create components/global/T3CeText.vue.
  2. Custom HTML Markup: In the <template> section of your new component, define the custom HTML markup that you want to use.
  3. Import JavaScript Logic and Types: Use the <script lang="ts" setup> tag to import the necessary types and functions from the nuxt-typo3 module. Define the component's props and implement or extend the JavaScript logic as needed.
  4. Add Custom CSS Styles: Write your CSS in the <style> section of the component to style it according to your design requirements. Add a new file components/global/T3CeText.vue

Example: Overriding T3CeText

components/global/T3CeText.vue
<template>
  <div class="t3-ce-text">
    <h2>{{ header }}</h2>
    <p>{{ bodytext }}</p>
  </div>
</template>

<script lang="ts" setup>
import type { T3CeTextProps } from '@t3headless/nuxt-typo3';

const props = defineProps<T3CeTextProps>();
// Implement or extend JavaScript logic here
</script>

<style>
p {
  color: blue;
}
</style>

In this example, the <template> section contains the custom HTML, the <script lang="ts" setup> section is used for importing types and implementing JavaScript logic, and the <style> section is for adding custom CSS styles.

This approach ensures a consistent and effective way to override both the visual (CSS/Markup) and functional (JavaScript) aspects of a content element in nuxt-typo3.

Why should I keep my Content Element (CE) components in the global directory? There are other possibilities. Read more about components overriding.

Utilizing Auto-Imported Composable Functions in Component Overrides

In nuxt-typo3, certain components may rely on composable functions to compute various values. When overriding or extending the JavaScript logic of these components, you can take advantage of Nuxt's auto-import feature for composable functions. This feature simplifies the process of incorporating and extending the functionality of these composables within your custom components.

For instance, if you are overriding the T3CeBullets component, you would create a file like components/global/T3CeBullets.vue. In this component, you can automatically import and use the relevant composable functions from the nuxt-typo3 module. This allows you to access and manipulate the properties and methods provided by these composables.

Here’s an example of how to override T3CeBullets with custom JavaScript logic using auto-imported composable functions:

components/global/T3CeBullets.vue
<script lang="ts" setup>
import type { T3CeBulletsProps } from '@t3headless/nuxt-typo3';

const props = defineProps<T3CeBulletsProps>();
const { listTag, showBaseList } = useT3CeBullets(props);
</script>

In this example:

  • The defineProps function is used to define the component's properties based on the T3CeBulletsProps type.
  • The useT3CeBullets composable function is auto-imported, providing access to specific properties (listTag, showBaseList) that can be used or modified within your component.

This approach demonstrates how Nuxt's auto-import feature for composable functions can be effectively used to enhance and customize the functionality of nuxt-typo3 components.