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 · API · all subjects

components/nuxtlayout

21 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 - named slots

NuxtLayout renders content through a default `<slot />`. Named slots can be passed from the parent component and received in the layout component using named slot syntax.

NuxtLayout component - basic usage

NuxtLayout is used to activate layouts on pages and error pages. Example: `<NuxtLayout><some page content></NuxtLayout>` renders the default layout.

NuxtLayout component - name prop

The `name` prop on NuxtLayout specifies which layout to render. It accepts a string, reactive reference, or computed property. The value must match a layout file name in the `app/layouts/` directory, or can be `false` to disable the layout. The default value is `default`. Layout names are normalized to kebab-case, so a file named `errorLayout.vue` becomes `error-layout` when used as the name prop.

NuxtLayout component - fallback prop

The `fallback` prop on NuxtLayout specifies a layout to render if an invalid layout name is passed to the `name` prop. It must match a layout file name in the `app/layouts/` directory. The default value is `null`.

NuxtLayout component - custom props

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

NuxtLayout component - layout props from page meta

When using `definePageMeta` with the object syntax for `layout`, props can be automatically passed to the layout component. The layout object should have a `name` property specifying the layout name and a `props` property containing an object of props to pass. The layout component receives these props using `defineProps`.

NuxtLayout component - transitions

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

NuxtLayout component - ref access

To access the ref of a layout component from NuxtLayout, use `ref.value.layoutRef` to get the underlying layout component reference. The layout component can expose methods and properties using `defineExpose()`.

Route rules appLayout property

In `nuxt.config.ts`, you can set layouts for specific routes using the `appLayout` property in route rules. The `appLayout` property can be set to a layout name (e.g., `'admin'`), or `false` to disable layout for a route. Wildcards are supported (e.g., `/dashboard/**`). This feature was added in v4.3.

Passing props to layouts via definePageMeta

Starting in v4.4, you can pass props to layouts by using the object syntax for the `layout` property in `definePageMeta`. Specify `layout: { name: 'layoutName', props: { prop1: value1, prop2: value2 } }`. Props are fully typed based on the layout's `defineProps`, providing autocomplete and type-checking in the editor.

Override layout on per-page basis

To take full control over layout on a per-page basis, set `layout: false` in `definePageMeta` and then use the `<NuxtLayout>` component directly within the page. You can pass named slots to the layout component for custom content areas.

NuxtLayout as non-root element requirement

If you use `<NuxtLayout>` within your pages, make sure it is not the root element, or disable layout/page transitions.

Enable layouts with NuxtLayout component

To enable layouts, add the `<NuxtLayout>` component to your `app.vue` file, wrapping `<NuxtPage />`. This is the basic structure to enable the layouts framework in a Nuxt application.

Single layout recommendation

If you only have a single layout in your application, it is recommended to use `app.vue` directly instead of the layouts framework.

Three ways to use a layout

Layouts can be used in three ways: (1) Set a `layout` property in your page with `definePageMeta`, (2) Set the `name` prop of `<NuxtLayout>`, or (3) Set the `appLayout` property in route rules.

Layout name normalization to kebab-case

Layout names are automatically normalized to kebab-case. For example, `someLayout` becomes `some-layout`.

Default layout fallback

If no layout is specified, `app/layouts/default.vue` will be used automatically.

Layout single root element requirement

Unlike other components, layouts must have a single root element to allow Nuxt to apply transitions between layout changes. This root element cannot be a `<slot />`.

Default layout structure

The default layout file is `~/layouts/default.vue`. In a layout file, the content of the page is displayed in the `<slot />` component.

NuxtLayout name prop for dynamic layout selection

You can dynamically select a layout by using the `name` prop of `<NuxtLayout>`. This allows you to choose the layout at runtime based on conditions like API calls or logged-in status.

Nested layout naming convention

For nested directories, the layout's name is based on its own path directory and filename, with duplicate segments being removed. For example: `~/layouts/desktop/default.vue` becomes `desktop-default`, `~/layouts/desktop-base/base.vue` becomes `desktop-base`, and `~/layouts/desktop/index.vue` becomes `desktop`.

Give your agent this brain