setPageLayout composable signature and purpose
setPageLayout allows you to dynamically change the layout of a page. It can only be called within the Nuxt context, such as inside route middleware or plugins. It relies on access to the Nuxt context.
composables/set-page-layout
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.
setPageLayout basic usage - change layout by name
Call setPageLayout with a string argument to change the layout to the specified layout name. The layout name refers to a layout file in the app/layouts directory.
setPageLayout with props - pass data to layout
As of Nuxt v4.3, you can pass props to the layout by providing an object as the second argument to setPageLayout. The syntax is setPageLayout(layoutName, propsObject) where propsObject contains the props you want to pass to the layout component.
setPageLayout example - route middleware to change layout
Example showing setPageLayout in a route middleware: ```ts export default defineNuxtRouteMiddleware((to) => { setPageLayout('other') }) ``` This middleware sets the layout to 'other' for the route being navigated to.
setPageLayout example - pass props to layout
Example showing setPageLayout with props in a route middleware: ```ts export default defineNuxtRouteMiddleware((to) => { setPageLayout('admin', { sidebar: true, title: 'Dashboard', }) }) ``` This passes sidebar and title props to the admin layout component.
setPageLayout server-side constraint - must occur before layout render
If you set the layout dynamically on the server side, you must do so before the layout is rendered by Vue to avoid a hydration mismatch. This means calling setPageLayout within a plugin or route middleware, not in component lifecycle hooks.