“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

Offer a piece of my beauty painting, trying to buy off the official, browse more, 😁😁😁

preface

I have been working for more than two years, and it is my first time to contact the Nuxt framework. In this article, I record the learning process of Nuxt3, and also share the knowledge points of Nuxt3 with everyone. Nuxt3 installation is no longer described, today I will introduce you to the layout of Nuxt3, because Nuxt is based on the compact SSR framework. Therefore, when developing, please pay attention to the standard name to avoid unnecessary file conflicts.

Layouts directory

First of all, app.vue is the core entry file of Nuxt. After adding the built-in component NuxtPage as the route exit, add pages folder to the same directory to create the index.vue file. You can load the contents of the index.vue file on the page.

Pages/index. Vue code

<template>
    <div style="height:500px; background:yellow;">
      Left
    </div>
    <div style="height:500px; background: red;">
      Right
    </div>
</template>

<script>
export default{}</script>
Copy the code

Above is the rendering of pages/index.vue. We defined the page as a “content page” and added the layout to the page.

The default layout

Nuxt3 can use the default layout by creating a new layouts folder and default.vue file in the root directory.

<template>
<div style="display:flex; flex-direction:column; height:800px;">
  <div class="header">The title</div>
  <div class="container">
    <slot></slot>
  </div>
</div>
</template>

<style>
.header {
  height: 200px;
  background: blue;
}
.container {
  flex: 1 1 auto;
  background: #ccc;
  padding:20px;
}
</style>
Copy the code

Page renderings need to be addedslotCan makepageThe contents page in the directory is loaded. In the viewdefault.vueIs a top and bottom layout (blue and gray background), what if we also want to customize a left and right layout?

Custom layout

Customize a vue file in the layouts folder, which I created as Custom.vue

Custom.vue file contents

<template>
  <div>
      <h1>
      Some shared layout content:
  </h1>
  <div style="margin-top:20px; padding:20px; background:pink;">
   <slot name="header">
      <h2>Customize the content title</h2>
    </slot>
  <div class="custom">
    <slot />
  </div>
    </div>
  </div>
</template>

<script>
export default{}</script>

<style>
.custom {
  width: 100%;
  display: flex;
  background: green;
}
.custom h1 {
  color: #ccc;
}
.custom div {
  flex: 1 1 auto;
}
</style>
Copy the code

Next we want to apply this layout to the “content page”. This requires a change to the “content page” code, as shown below

Pages/index. Vue content

<template>
    <div style="height:500px; background:yellow;">
      Left
    </div>
    <div style="height:500px; background: red;">
      Right
    </div>
  
</template>

<script>
export default {
 layout: "custom"
}
</script>
Copy the code

In the pages/ directory, we need to add the layout property to the Vue file of the custom layout and set it to the same name as the custom layout file to achieve this effect. However, a new problem is that our default layout has disappeared. So how can we have a custom layout in our content page while keeping the default layout?

Slot using

We modify the pages/index code as follows

<template>
<NuxtLayout>
<NuxtLayout name="custom">
    <template #header>Slots title</template>
    <div style="height:500px; background:yellow;">
      Left
    </div>
    <div style="height:500px; background: red;">
      Right
    </div>
  </NuxtLayout>
</NuxtLayout>
  
</template>

<script>
export default {
 layout: false
}
</script>
Copy the code

Note:layoutAttribute tofalseAnd use built-in componentsNuxtLayout, its use method andslotType, not addednameProperty defaults todefault, the page is as follows:We can also add to this in the content page<NuxtLayout>(top down layout) and<NuxtLayout name="custom">(left and right layout) to recursively invoke components that I won’t go into here.

Set up using

Finally, since we are going to use a

conclusion

The layouts folder forces the convention to place all layout files and slots on the page. The Pages folder continues in the next article