Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: add layout to match custom header example (#4593)

This commit is contained in:
Daniel Roe 2022-04-25 17:54:20 +01:00 committed by GitHub
parent 4ca940d29a
commit 8fae863997
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/content/2.guide/3.directory-structure/6.layouts.md
View File

@ -73,7 +73,24 @@ Learn more about [defining page meta](/guide/directory-structure/pages#page-meta
Even if you are using the `~/pages` integration, you can take full control by using the `<NuxtLayout>` component (which is globally available throughout your application), by setting `layout: false`.
```vue
::code-group
```vue [layouts/custom.vue]
<template>
<div>
<header>
<slot name="header">
Default header content
</slot>
</header>
<main>
<slot />
</main>
</div>
</template>
```
```vue [pages/index.vue]
<template>
<NuxtLayout name="custom">
<template #header> Some header template content. </template>
@ -89,6 +106,8 @@ definePageMeta({
</script>
```
::
## Example: changing the layout
You can also use a ref or computed property for your layout.