Page Layouts

Layouts are placed in the ./layouts directory and are used to define a shared layout for a group of pages.

For example, you can have a default.vue layout that is used for all pages, and a blog.vue layout that is used for all blog posts.

Create a layout

To create a layout, simply create a .vue file in the ./layouts directory.

<template>
  <div>
    <h1>Blog layout</h1>
    <slot />
  </div>
</template>

Use a layout in dynamic pages

To change the layout of a page, you can change the value of the page_layout attribute within the API response.

<template>
  <div>
    <NuxtLayout :name="layout">
      <component :is="renderCustomElements(page.content)" />
    </NuxtLayout>
  </div>
</template>

<script lang="ts" setup>
const { fetchPage } = useDrupalCe()
const page = await fetchPage(useRoute().path)
// Set to false to support custom layouts, using <NuxtLayout> instead.
definePageMeta({
  layout: false,
})
const layout = computed(() => {
  return page.value.page_layout || 'default'
})
</script>

Use a layout in static pages

To change the layout of a page within the pages directory, you can set the layout property in the page component.

<script setup>
definePageMeta({
  layout: 'blog',
});
</script>

Nuxt layout documentation

For more information on routing in Nuxt.js, see the Nuxt layouts documentation.