Nuxt.JS View

From WikiOD

The content of this chapter explains how to configure data and views for the specified route in the Nuxt.js application, including application templates, pages, layouts, and HTML headers.

Image.2.png
Template[edit | edit source]

You can customize the default application template of Nuxt.js. To customize the default html template, you only need to create an app.html file in the application root directory.

The default template is:

<!DOCTYPE html>
 <nowiki><html {{ HTML_ATTRS }}>
   <head {{ HEAD_ATTRS }}>
     {{ HEAD }}</nowiki>
 <nowiki> </nowiki> <nowiki></head></nowiki>
 <nowiki> </nowiki> <nowiki><body {{ BODY_ATTRS }}>
     {{ APP }}</nowiki>
 <nowiki> </nowiki> <nowiki></body></nowiki>
 <nowiki></html></nowiki>

For example, you can modify the template to add conditional expressions for IE:

<!DOCTYPE html>
<!--[if (gt IE 9)|!(IE)]><!--> <nowiki><html {{ HTML_ATTRS }}><!--<![endif]-->
   <head {{ HEAD_ATTRS }}>
     {{ HEAD }}</nowiki>
 <nowiki> </nowiki> <nowiki></head></nowiki>
 <nowiki> </nowiki> <nowiki><body {{ BODY_ATTRS }}>
     {{ APP }}</nowiki>
 <nowiki> </nowiki> <nowiki></body></nowiki>
 <nowiki></html></nowiki>
Layout[edit | edit source]

Nuxt.js allows you to extend the default layout or create a custom layout in the layout directory.

Default layout[edit | edit source]

The default layout of the application can be extended by adding the layouts/default.vue file.

Tip: Don't forget to add the <nuxt/> component to the layout file to display the main content of the page.

The source code of the default layout is as follows:

<template>
   <nuxt/>
 </template>
Custom layout[edit | edit source]

Each file (top level) in the layouts directory will create a custom layout that can be accessed through the layout attribute in the page component.

Suppose we want to create a blog layout and save it to layouts/blog.vue:

<template>
   <nowiki><div></nowiki>
     <nowiki><div>My blog navigation bar is here</div></nowiki>
     <nuxt/>
   <nowiki></div></nowiki>
 </template>

Then we must tell the page (ie pages/posts.vue) to use your custom layout:

<template>
 </template>
 <nowiki><script>
 export default {
   layout: 'blog'
   // page component definitions
 }
 </script></nowiki>

More information about the layout attribute:  API page layout

Click to view the  demo video to  understand the actual effect of the custom layout.

Error page[edit | edit source]

You can customize the error page by editing the layouts/error.vue file.

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

This layout file does not need to contain the <nuxt/> tag. You can think of this layout file as a component that displays application errors (404, 500, etc.).

The default error page source code is  here .

Give an example of a personalized error page layouts/error.vue:

<template>
   <nowiki><div class="container"></nowiki>
     <nowiki><h1 v-if="error.statusCode === 404">Page does not exist</h1></nowiki>
     <nowiki><h1 v-else>Application error exception</h1></nowiki>
     <nuxt-link to="/">Homepage</nuxt-link>
   <nowiki></div></nowiki>
 </template>
 
 <script>
 export default {
   props: ['error'],
   layout: 'blog' // You can specify a custom layout for the error page}
 </script>
Page[edit | edit source]

Page components are actually Vue components, but Nuxt.js adds some special configuration items to these components (corresponding to the features provided by Nuxt.js) so that you can quickly develop general applications.

<template>
 <nowiki> </nowiki> <nowiki><h1 class="red">Hello {{ name }}</nowiki>!<nowiki></h1></nowiki>
 </template>
 
 <nowiki><script>
 export default {
   asyncData (context) {
     // called every time before loading the component
     return { name: 'World' }
   },
   fetch () {
     // The fetch method is used to fill the store before rendering the page
   },
   head () {
     // Set Meta Tags for this Page
   },
   // and more functionality to discover
   ...
 }
 </script></nowiki>
 
 <nowiki><style>
 .red {
   color: red;
 }
 </style></nowiki>

Nuxt.js provides special configuration items for the page:

Attribute name Description
asyncData The most important key is to support asynchronous data processing. In addition, the first parameter of this method is the context object of the current page component.
fetch TemplateasyncData Similar to the method, it is used to get data to fill the application's state tree (store) before rendering the page. The difference is that the method does not set the data of the component. For details, please refer to the documentation on the fetch method.
head Configure the Meta tag of the current page. For details, refer to the page header configuration API .
layout Specify the layout used by the current page ( layouts the layout file in the root directory). For details, please refer to the documentation on the layout.
loading If it is set to false, it will prevent the page from automatically calling this.$nuxt.$loading.finish()and this.$nuxt.$loading.start(), you can manually control it, please see the example, only applicable to loadingthe case of setting in nuxt.config.js. Please refer to the API configuration  loading document.
transition Specify the transition animation for page switching. For details, please refer to page transition animation.
scrollToTop Boolean value, falsedefault: . Used to determine whether the current page needs to be scrolled to the top before rendering the page. This configuration is used  in the application scenario of nested routing .
validate The verification method is used to verify  dynamic routing parameters.
middleware Specify the middleware of the page. The middleware will be called before the page is rendered. Please refer to the  routing middleware .

For detailed information about page configuration items, please refer to the  page API .

HTML header[edit | edit source]

Nuxt.js uses  vue-meta to  update the Head and html attributes of the application.

Nuxt.js configures vue-meta with the following parameters:

{
   keyName: 'head', // Set up meta Field of the information component object,vue-meta Will be based on this key Value acquisition meta Information
   attribute: 'n-head', // vue-meta The name of the attribute added when the tag is monitored
   ssrAttribute: 'n-head-ssr', // Let vue-meta Learned meta The name of the attribute that the information has been rendered on the server side
   tagIDKeyName: 'hid' //Let vue-meta Used to decide whether to overwrite or append tag Attribute name
 }
Default Meta tags[edit | edit source]

Nuxt.js allows you to define all the default meta tags required by the application in nuxt.config.js, just configure it in the head field:

Note: Nuxt.js uses hid instead of the default value vmid to identify the element key A configuration example using custom viewport and Google fonts:

head: {
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
   ],
   link: [
     { rel: 'stylesheet', href: '<nowiki>https://fonts.googleapis.com/css?family=Roboto'</nowiki> }
   ]
 }

If you want to know all the options of the head variable, please refer to the  vue-meta documentation .For more information about HTML header configuration of Nuxt.js application, please refer to  HTML Header Configuration API .

Personalize Meta tags for specific pages[edit | edit source]

Please refer to the page header configuration API for the Meta tags to personalize a specific page  .

Note: In order to avoid duplication caused by meta tags in sub-components that cannot correctly cover the same tags in parent components, it is recommended to use the hid key to assign a unique identification number to the meta tags. Please read more about vue-meta .