useLayout

Source
useLayout returns the layout resolved for the current route.
This composable is available in Nuxt v4.5+.

Description

useLayout returns a computed ref with the layout resolved for the current route, using the same chain as <NuxtLayout>: the page's layout meta first, then the appLayout set via route rules, then 'default'.

Within a rendered <NuxtLayout> it reflects the enclosing layout; outside of one (for example in app.vue) it returns the layout that would be resolved for the current route.

Unlike reading route.meta.layout directly, this accounts for a layout set through route rules and stays in sync as the route changes.

Example

app.vue
<script setup lang="ts">
const layout = useLayout()
</script>

<template>
  <div>
    <CommandPalette v-if="layout !== 'minimal'" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Return Values

A read-only computed ref resolving to the layout name (a string), or false when the layout is disabled.