useLayout v4.5

描述

useLayout 返回一个计算型 ref，其中包含当前路由解析后的布局，使用与 <NuxtLayout> 相同的链：首先是页面的 layout 元数据，然后是通过路由规则设置的 appLayout，最后是 'default'。

在已渲染的 <NuxtLayout> 内部，它会反映外层布局；在其外部（例如在 app.vue 中），它会返回当前路由将会解析出的布局。

与直接读取 route.meta.layout 不同，这会考虑通过路由规则设置的布局，并会随着路由变化保持同步。

返回值

一个只读的计算型 ref，解析为布局名称（一个 string），或者在布局被禁用时为 false。

示例

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

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