The Views section describes all you need to know to configure data and views for a specific route in your Nuxt.js Application. Views consist of an app template, a layout, and the actual page. In addition, you can define custom meta tags for the head section of each page which are important for SEO (Search Engine Optimization).

Composition of a View in Nuxt.js

Composition of a View in Nuxt.js

Pages

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

  1. <template>
  2.   <h1 class="red">Hello World</h1>
  3. </template>
  5. <script>
  6.   export default {
  7.     head() {
  8.       // Set Meta Tags for this Page
  9.     }
  10.     // ...
  11.   }
  12. </script>
  14. <style>
  15.   .red {
  16.     color: red;
  17.   }
  18. </style>

Properties of a page component

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

Views - 图2

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

Layouts

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.

Default Layout

You can define a default layout by adding a default.vue 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 />
  3. </template>

Views - 图3

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

  1. <template>
  2.   <div>
  3.     <div>My blog navigation bar here</div>
  4.     <Nuxt />
  5.   </div>
  6. </template>

Views - 图4

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 -->
  3. </template>
  4. <script>
  5.   export default {
  6.     layout: 'blog'
  7.     // page component definitions
  8.   }
  9. </script>

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.

Error Page

The error page is a page component which is always displayed when an error occurs (that does not happen while server-side rendering).

Views - 图6

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, 500, 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

  1. <template>
  2.   <div>
  3.     <h1 v-if="error.statusCode === 404">Page not found</h1>
  4.     <h1 v-else>An error occurred</h1>
  5.     <NuxtLink to="/">Home page</NuxtLink>
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     props: ['error'],
  12.     layout: 'error' // you can set a custom layout for the error page
  13.   }
  14. </script>

Document: App.html

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>
  9. </html>

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

app.html

  1. <!DOCTYPE html>
  2. <!--[if IE 9]><html class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
  3. <!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  4.   <head {{ HEAD_ATTRS }}>
  5.     {{ HEAD }}
  6.   </head>
  7.   <body {{ BODY_ATTRS }}>
  8.     {{ APP }}
  9.   </body>
  10. </html>

Views - 图7

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