Page Layouts

Nuxt layouts are placed in the ./layouts directory and are used to define a shared site layout for a group of pages. When a page has a different layout, nuxt takes care of swapping the layout component(s).

For example, you can have a default.vue layout that is used for most 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>

Drupal controlled layouts

The Drupal page API comes with a page_layout attribute within its response. By default, this is used to control which layout is applied by Nuxt. This allows Drupal code to customize the layout used by Nuxt.

To set a custom layout from within Drupal, the page_layout attribute must be set accordingly, e.g. via hook_lupus_ce_renderer_response_alter().

Setting the layout in the frontend

The frontend may set a custom layout by proving a custom page component for some routes. For example, to change the layout for all /news/* routes controlled by Drupal via the page API, create a component news/[...slug].vue in the pages directory of Nuxt. Then make the page component follow the logic of the default page component, but override the layout to be hard-coded:

<script lang="ts">
  import DefaultPage from '../[...slug].vue'

  export default {
    extends: DefaultPage,
    async setup() {
      const { fetchPage, renderCustomElements, usePageHead, getPageLayout } = useDrupalCe()
      const page = await fetchPage(useRoute().path, {
        query: useRoute().query,
      }, undefined, true)

      const layout = 'custom'
      usePageHead(page)

      return {
        page,
        layout,
        renderCustomElements,
      }
    },
  }
</script>

Nuxt layout documentation

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