Composition of a View in Nuxt.js

Every Page component is a Vue component but Nuxt.js adds special attributes and functions to make the development of your application as easy as possible.

pages/index.vue

There are many properties of the page component such as the head property in the example above.

Views - 图2

See the to learn more about all the properties can use on your page

Layouts are a great help when you want to change the look and feel of your Nuxt.js app. For example you want to include a sidebar or have distinct layouts for mobile and desktop.

You can define a default layout by adding a file inside the layouts directory. This will be used for all pages that don’t have a layout specified. The only thing you need to include in the layout is the <Nuxt /> component which renders the page component.

layouts/default.vue

  1. <template>
  2.   <Nuxt />

Learn more about the Nuxt component in the components chapter

Custom Layout

You can create custom layouts by adding a .vue file to the layouts directory. In order to use the custom layout you need to set the layout property in the page component where you want to use that layout. The value will be the name of the custom layout that you have created.

To create a blog layout add a blog.vue file to your layouts directory layouts/blog.vue:

layouts/blog.vue

Make sure to add the <Nuxt/> component when creating a layout to actually include the page component.

We then use the layout property with the value of ‘blog’ in the page where we want that layout to be used.

pages/posts.vue

  1. <template>
  2.   <!-- Your template -->
  4. <script>
  5.   export default {
  6.     layout: 'blog'
  7.     // page component definitions
  8.   }

Views - 图5

If you don’t add a layout property to your page, e.g. layout: 'blog', then the default.vue layout will be used.

Although this file is placed in the layouts folder, it should be treated as a page.

As mentioned above, this layout is special, since you should not include the <Nuxt/> component inside its template. You must see this layout as a component displayed when an error occurs (404, , etc.). Similar to other page components, you can set a custom layout for the error page as well in the usual way.

You can customize the error page by adding a layouts/error.vue file:

layouts/error.vue

The app template is used to create the actual HTML frame of your document for your Nuxt.js application which injects the content as well as variables for the head and body. This file is created automatically for you and in general rarely needs to be modified. You can customize the HTML app template used by Nuxt.js to include scripts or conditional CSS classes by creating an app.html file in the source directory of your project which by default is the root directory.

The default template used by Nuxt.js is:

app.html

  1. <!DOCTYPE html>
  2. <html {{ HTML_ATTRS }}>
  3.   <head {{ HEAD_ATTRS }}>
  4.     {{ HEAD }}
  5.   </head>
  6.   <body {{ BODY_ATTRS }}>
  7.     {{ APP }}
  8.   </body>

One use case of using a custom app template is to add conditional CSS classes for IE:

app.html

While you can add JavaScript and CSS files in the , it is recommended to use the nuxt.config.js for these tasks instead!