9. Utils

The head Method

Nuxt.js use vue-meta to update the headings and html attributes of your application.

Use the head method to set the HTML Head tags for the current page. Your component data are available with this in the head method, you can use set custom meta tags with the page data.

<script>
  export default {
    ...
    // add
    head () {
      return {
        title: 'Nuxt Blog with Gist API || @KHRIZTIANMORENO',
        meta: [
          { hid: 'description', name: 'description', content: 'A blog server side render using Gist as API' }
        ]
      }
    },
    
    ...
  }
</script>

Assets

By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving. You can also use Static directory for static assets.

-| assets/
----| image.png
----| main.css

• Routes Transitions assets/main.css

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

• Add the css to nuxt.config.js

module.exports = {
  css: ['~/assets/main.css']
}

To see these steps complete, you can change to the 9-utils branch in this repository.