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 · Getting started · all subjects

routing & views

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

NuxtLayout component purpose

The <NuxtLayout> component activates layouts on pages and error pages. It can be used in app.vue or error.vue to render a layout wrapper around page content.

NuxtLayout name prop

The name prop specifies which layout to render. It must match the name of a layout file in the app/layouts/ directory. The type is string | false, with a default value of 'default'. Layout names are normalized to kebab-case, so 'errorLayout.vue' becomes 'error-layout' when passed as the name property.

NuxtLayout fallback prop

The fallback prop specifies a layout to render when an invalid layout name is passed to the name prop. It must match the name of a corresponding layout file in the app/layouts/ directory. The type is string with a default value of null.

Pass custom props to NuxtLayout

NuxtLayout accepts additional custom props beyond name and fallback. These custom props are accessible in the layout component as attributes using $attrs in the template or useAttrs() in script setup.

Pass layout props via definePageMeta

When using definePageMeta with the object syntax for layout, props can be automatically passed to the layout component. The layout property can have a name field and a props field. The layout component receives these props using defineProps.

NuxtLayout transitions setup

NuxtLayout renders content via <slot /> wrapped in Vue's <Transition /> component to activate layout transitions. For transitions to work as expected, NuxtLayout should not be the root element of the page component.

Access layout component ref

To get a reference to a layout component, access it through ref.value.layoutRef. The layout component can expose methods using defineExpose, which are then callable from the parent.

NuxtLayout with named slots example

NuxtLayout supports named slots. The layout component receives content via both named slots and the default slot. Example: a page passes content via <template #header>, and the layout defines <slot name="header" /> and <slot /> to receive this content.

Give your agent this brain