Display Navigation

To show the navigation, we'll use layouts.

"Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components."

Add Layouts

Create a layouts/default.vue file to enable a default layout.

      navigation placeholder

Make sure to include the <slot/> component, as it's responsible for displaying the page content.

Edit app.vue

Now we need to edit app.vue to use our new layout.

    <NuxtPage />

Show Menu

nuxt-typo3 provides useful composables so you can easily access the data you need. We'll create a computed value to extract navigation data from initialData.

Edit layouts/default.vue as follows:

<script setup lang="ts">
const { initialData } = useT3Api()
const navigation = computed(() => {
  return initialData.value?.navigation?.[0].children

Here's what we've done:

  1. We use the useT3Api() composable to extract initialData.
  2. We create a computed value to return links from the first site in the TYPO3 tree.
The part of code navigation?.[0].children might be different in your project. It depends on how your API returns the data.

Now we can display the navigation.

    <header v-if="navigation">
        v-for="{ link, title } in navigation"
        {{ title }}
    <slot />

Here, we use the NuxtLink component to render the navigation links. If navigation data is available, we iterate over it and create a NuxtLink for each item, using the link as the key and the URL, and title as the link text.