Layouts

This guide shows how to use and create custom layouts in the Frontend Application.

Backend Layouts

Backend layouts are regular Vue.js components which are responsible for rendering different colPos from your page response. It assumes you have configured a backend layout for your page response:

...
  "appearance": {
    "layout": "layout-1",
    "backendLayout": "singlecolumn"
  },
...

Create Backend Layout

If your backend layout is called singlecolumn, then you should create a new file named T3BlSinglecolumn.

components/T3BlSinglecolumn.vue
<template>
  <div>
    Custom Backend Layout
    <p>First column</p>
    <T3Renderer
      v-if="content?.colPos0"
      :content="content.colPos0"
    />
    <p>Second column</p>
    <T3Renderer
      v-if="content?.colPos1"
      :content="content.colPos1"
    />
  </div>
</template>

<script lang="ts" setup>
import type { T3BackendLayout } from '@t3headless/nuxt-typo3'
defineProps<T3BackendLayout>()
</script>
The T3Renderer component is responsible for rendering all Content Elements from a specific column.
Please remember that your Backend Layout components should be accessible as global components.

Frontend Layouts

Frontend Layouts are regular Vue.js components that you can place in the layouts directory. They are usually responsible for maintaining the main structure of the page.

It assumes you have configured a backend layout for your page response:

...
  "appearance": {
    "layout": "layout-1",
    "backendLayout": "singlecolumn"
  },
...

Override your T3Page [...slug].vue

To use a frontend layout, you can implement the solution: "Overriding a Layout on a Per-page Basis". Since we fetch pageData at the page level (as we don't have access to Page Data at the App.vue level), you will need to override your [...slug].vue page. In this case, please create/edit your pages/[...slug].vue file.

pages/[...slug
<template>
  <NuxtLayout :name="frontendLayout">
    <T3BackendLayout
      v-if="pageData?.content"
      :name="backendLayout"
      :content="pageData.content"
    />
  </NuxtLayout>
</template>

<script setup lang="ts">
const { headData, pageData, backendLayout, frontendLayout } = await useT3Page()
useHead(headData);
definePageMeta({
  layout: false
})
</script>

Create Frontend Layout

If your frontend layout is called layout-1, then you should create a new file named layout-1 in layouts directory. Here is no T3 mapping since layouts are native feature of Nuxt.

layouts/layout-1.vue
<template>
  <div>
    <header>
      My header
    </header>    
    <slot /> <!-- Remember about the slot -->
    <footer>
      My Footer
    </footer>
  </div>
</template>
Unlike other components, your layouts must have a single root element to allow Nuxt to apply transitions between layout changes - and this root element cannot be a <slot />. Please read more about layouts here