Nuxt.js1-6

Default template and default layout for NUXT

In the development of the application, often use some common elements, such as the title of the page is the same, each page is an identical title. At this point we have two methods, the first method is to make a common component out, the second method is to modify the default template. Both of these approaches have pros and cons, such as more flexible public components, but they need to be introduced manually each time, and templates are easier to introduce, but only for each page. In this lesson, we'll learn how to use the default template and default layout features of NUXT.

Default Template

NUXT provides us with a super-simple default template ordering method, as long as you create a app.html in the root directory can be achieved. Now we want to add the words "jspang.com Technology Fat Blog" to the top of each page, and we can use the default template to do it.

<! DOCTYPE html>   {{head}}    {APP}}</body>
Here {{HEAD}} is reading the information in Nuxt.config.js, {{APP}} is the main page in the Pages folder we wrote. It is important to note that both the head and the app need to be capitalized if lowercase will be an error.
There's a little pit here. You need to be aware that if you set up a default template, remember to restart the server, or your display will not succeed, but the default layout is not to restart the server.
Default layout
Features like the default template have a default layout, but you can see from the name that the default layout is primarily used for the unified layout of the page. It is in the location root directory of the Layouts/default.vue. Note that in the default layout do not include header information, but only about the <template> tag content Unified.
Or the top demand, we put the words "jspang.com Technology Fat Blog" at the top of each page to see the implementation in the default layout.
<template>  <div>    <p>jspang.com  technology Chubby blog </p>    <nuxt/>  </div ></template>
The <nuxt/> here is equivalent to the content of each of our pages, you can also put some common styles in the default layout, but the individual does not recommend this, will increase the complexity of the page.
Nuxt.js1-6