1. Locally using the head as an object
2. Locally using the head as a function so that you have access to data and computed properties.

Nuxt.js lets you define all default tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default title and description tag for SEO purposes or for setting the viewport or adding the favicon.

nuxt.config.js

This will give you the same title and description on every page

You can also add titles and meta for each page using the head method inside your script tag on every page.

pages/index.vue

pages/index.vue

Use as a function to set a title and description only for the home page. By using a function you have access to data and computed properties

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

To avoid any duplication when used in child components, please give a unique identifier with the hid key to the meta description. This way vue-meta will know that it has to overwrite the default tag.

You can include external resources such as scripts and fonts by adding them globally to the nuxt.config.js or locally in the head object or function.

You can also pass each resource an optional to include the resource before the closing </body> tag.

nuxt.config.js

pages/index.vue

Resource Hints

Adds prefetch and preload links for faster initial page load time.

You may want to only disable this option if you have many pages and routes.