Views

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

    To change the template, create an 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:

    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.     {{ APP }}
    8.   </body>
    9. </html>

    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 having distinct layouts for mobile and desktop

    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:

    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:

    More information about the layout property: API Pages layout

    Check out the to see custom layouts in action.

    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:

    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>
    8. <script>
    9. export default {
    10.   props: ['error'],
    11.   layout: 'blog' // you can set a custom layout for the error page
    12. }
    13. </script>

    More information about the pages properties usage: API Pages

    Nuxt.js uses 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

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

    To learn more about the options available for head, take a look at .

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