Overriding Page Template

The Nuxt-TYPO3 library provides a flexible architecture that allows you to customize and override the default views. One such case is the "catch-all route" page view, which is defined in Nuxt3 by the [...slug].vue file. If you wish to override this view, this guide will show you how to accomplish it.

What is a Catch-all Route Page View?

A catch-all route page view is essentially a wildcard route that matches all paths where a specific page is not defined. In Nuxt-TYPO3, it is utilized to handle page requests dynamically, serving the content fetched from the TYPO3 API.

You can read more here

How to Override a Catch-all Route Page View?

Overriding a catch-all route page view involves creating a new [...slug].vue file in the pages directory of your application.

Here is how the [...slug].vue page is implemented in Nuxt-TYPO3:

<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>

In this example, the <T3BackendLayout> component is used to render the page content based on provided Backend Layout name.

To override this behavior, follow the steps below:

Step 1: Create a new [...slug].vue file

Create a new [...slug].vue file in your application's pages directory. This file should define a Vue component for your custom page view.

Step 2: Customize the template and script

Update the template and script to suit your needs. Your custom component will have access to the pageData object, which contains the page content fetched from the TYPO3 API.

<template>
  <NuxtLayout :name="frontendLayout">
    <!-- Your custom presentation here -->
    <T3BackendLayout
      v-if="pageData?.content"
      :name="backendLayout"
      :content="pageData.content"
    />
    <!-- Your custom presentation here -->
  </NuxtLayout>
</template>

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

With these steps, your custom page view will be used for all routes matching the [...slug] pattern.