Views

The Views section describes all you need to configure data and views for a specific route in your Nuxt.js Application (App Template, Layouts, Pages and HTML Head).

nuxt-views-schema

App Template

You can customize the HTML app template used by Nuxt.js to include scripts or conditional CSS classes.

To change the template, create an app.html file, in the src folder of your project. (which is the project’s root directory by default).

The default template used by Nuxt.js is:

  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:

  1. <!DOCTYPE html>
  2. <!--[if IE 9]><html lang="en-US" 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>

Layouts

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

Default Layout

You can extend the main layout by adding a layouts/default.vue file. It will be used for all pages that don’t have a layout specified.

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

The default layout that comes out of the box is just three lines long and simply renders the page component:

  1. <template>
  2. <nuxt />
  3. </template>

Custom Layout

Every file (top-level) in the layouts directory will create a custom layout accessible with the layout property in the page components.

Let’s say we want to create a blog layout and save it to layouts/blog.vue:

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

Then we have to tell the pages (i.e. pages/posts.vue) to use your custom layout:

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

More information about the layout property: API Pages layout

Check out the demonstration video to see custom layouts in action.

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).

Warning: Though 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 <nuxt/> 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.

The default error page source code is available on GitHub.

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

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

Pages

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

[

Watch a free lesson about Nuxt.js Page Components on Vue School

](https://vueschool.io/lessons/nuxtjs-page-components?friend=nuxt)

  1. <template>
  2. <h1 class="red">Hello {{ name }}!</h1>
  3. </template>
  4. <script>
  5. export default {
  6. asyncData (context) {
  7. // called every time before loading the component
  8. // as the name said, it can be async
  9. // Also, the returned object will be merged with your data object
  10. return { name: 'World' }
  11. },
  12. fetch () {
  13. // The `fetch` method is used to fill the store before rendering the page
  14. },
  15. head () {
  16. // Set Meta Tags for this Page
  17. },
  18. // and more functionality to discover
  19. ...
  20. }
  21. </script>
  22. <style>
  23. .red {
  24. color: red;
  25. }
  26. </style>
AttributeDescriptionDocumentation
asyncDataThe most important key. It can be asynchronous and receives the context as argument.Guide: Async data
fetchUsed to fill the store before rendering the page. It’s like the asyncData method, except it doesn’t set the component data.API Pages fetch
headSet specific <meta> tags for the current page.API Pages head
layoutSpecify a layout defined in the layouts directory.API Pages layout
loadingIf set to false, prevents a page from automatically calling this.$nuxt.$loading.finish() as you enter it and this.$nuxt.$loading.start() as you leave it, allowing you to manually control the behavior, as this example shows. Only applies if loading is also set in nuxt.config.js.API Configuration loading
transitionDefines a specific transition for the page.API Pages transition
scrollToTopBoolean (default: false). Specify if you want the page to scroll to the top before rendering the page. It’s used for nested routes.API Pages scrollToTop
validateValidator function for dynamic routes.API Pages validate
middlewareDefines middleware for this page. The middleware will be called before rendering the page.Guide: middleware

More information about the pages properties usage: API Pages

HTML Head

Nuxt.js uses vue-meta to update the document head and meta attributes of your application.

The vue-meta Nuxt.js uses can be found on GitHub.

Info: Nuxt.js uses hid instead of the default vmid key to identify meta elements

Default Meta Tags

Nuxt.js lets you define all default <meta> tags for your application inside nuxt.config.js. Define them using the same head property:

Example of a custom viewport with a custom Google font:

  1. head: {
  2. meta: [
  3. { charset: 'utf-8' },
  4. { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  5. ],
  6. link: [
  7. { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  8. ]
  9. }

To learn more about the options available for head, take a look at vue-meta documentation.

More information about the head method are available on the API Configuration head page.

Custom Meta Tags for a Page

More information about the head method can be found on the API Pages head page.