An HTML <head> element consists of the <title>, <style>, <link>, and <meta> elements. It can be a tedious task to add these elements manually. So, Nuxt takes care of them for you in your app. In Chapter 2, Getting Started with Nuxt, you learned that they are generated for you by Nuxt from the data in the JavaScript objects, which are written with curly braces ({}), in the Nuxt config file, as follows:
// nuxt.config.js
export default {
head: {
title: 'Default Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'parent' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
In this topic, we are interested in the meta block in the Nuxt config file and the pages inside...