This article is based on the previous page routing (a), page routing (two), on the basis of the article, about routing will not talk too much.

In our daily development, we have a variety of layout pages. How do we customize a layout in NuxT3? Nuxt provides us with a custom layout system where users can customize different layout pages.

The default layout

Under NUXT conventions, whenever a user writes a layout page under layouts/, it will be automatically imported into the application. By default, if a user-written layout file is named default.vue, it will be applied globally by default.

Layouts are usually used with
, and after nuxT loads the layout file,
will load pages in the Pages directory by default

  • Create a newdefault.vueLayout file of
<template>
  <div>
    <div style="border: 1px solid #000">
      <h1>Public content</h1>
      <NuxtLink to="/test">test</NuxtLink> | <NuxtLink to="/">The root</NuxtLink> |
      <NuxtLink to="/parent-1">Nested routines by the page</NuxtLink>
    </div>
    <slot />
  </div>
</template>

Copy the code
  • app.vuefile
<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>
Copy the code

  • Create a. Vue page file in the Pages directory

  • The directory structure is as follows

|--layout/
|--|--default.vue
|--pages/
|--|--test.vue
|--|--...
|--app.vue
Copy the code
  • Run the show

Custom layout

You can name the layout whatever you want and use it on the page you want.

  • layoutsI’m going to create a new layout file, so I’m going to create one herecustom.vue(Name optional)
<template>
  <div>
    <h1>This is the Custom layout</h1>
    <slot />
  </div>
</template>
Copy the code
  • Just set it up on the page you want to useLayout: the layout of the nameYou can use this layout
<template>
  <div >
      <h1>I'm the page for the Custom layout</h1>
  </div>
</template>

<script>
export default {
  layout: 'custom'};</script>
Copy the code
  • Run the following

A named slot

You can also name
in the layout file and use it in your page

  • default.vueAdd a named slot in
<template>
  <div>
    <div style="border: 1px solid #000">
      <h1>Public content</h1>
      <NuxtLink to="/test">test</NuxtLink> | <NuxtLink to="/">The root</NuxtLink> |
      <NuxtLink to="/parent-1">Nested routines by the page</NuxtLink>
    </div>
    <slot/>
    <slot name="test"/>  <! -- -- -- > new
  </div>
</template>
Copy the code
  • Just use this slot on the page you want
<template>
  <div>
    <div slot="default">
      <h1>I am the content section of the default slot</h1>
    </div>

    <div slot="test">
      <h1>I'm the content section of the Test slot</h1>
    </div>
  </div>
</template>
Copy the code
  • The page is as follows

<NuxtLayout>

You can also set Layout: false to turn off loading the default layout and use

to load the layout

<template>
  <NuxtLayout>
    <template #default>
      <h1>I am the content section of the default slot</h1>
    </template>

    <template #test>
      <h1>I'm the content section of the Test slot</h1>
    </template>
  </NuxtLayout>
</template>

<script>
export default {
  layout: false.// Close the loading of the default layout
};
</script>
Copy the code

with<script stup> sharing

If you want to use both