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.

layouts/default.vue
<template>
  <div>
    <header>
      navigation placeholder
    </header>
    <slot/>
  </div>
</template>

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.

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

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:

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

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.

layouts/default.vue
<template>
  <div>
    <header v-if="navigation">
      <NuxtLink
        v-for="{ link, title } in navigation"
        :key="link"
        :to="link"
      >
        {{ title }}
      </NuxtLink>
    </header>
    <slot />
  </div>
</template>

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.