new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · Guide · all subjects

layouts

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useLayout composable returns resolved layout for current route

useLayout returns a computed ref with the layout name (a string) or false when the layout is disabled. The layout is resolved 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.

useLayout accounts for route rules and stays in sync

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

useLayout example usage in app.vue

The following example shows how to use useLayout to conditionally render a CommandPalette component based on whether the layout is 'minimal': ```vue [app.vue] <script setup lang="ts"> const layout = useLayout() </script> <template> <div> <CommandPalette v-if="layout !== 'minimal'" /> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template> ```

Layout naming convention kebab-case

Layout file names are normalized to kebab-case. For example, if a layout file is named errorLayout.vue, it becomes error-layout when passed as the name property to <NuxtLayout />.

Layout props from page meta

When using definePageMeta with an object syntax for layout that includes a props property, those props are automatically passed to the layout component. The layout component can receive them using defineProps.

Layout props from definePageMeta example

Example of passing props to layout via definePageMeta in pages/dashboard.vue: ```vue <script setup lang="ts"> definePageMeta({ layout: { name: 'admin', props: { sidebar: true, }, }, }) </script> ``` In app/layouts/admin.vue, receive props using: ```vue <script setup lang="ts"> const props = defineProps<{ sidebar?: boolean }>() </script> ```

Give your agent this brain