A Beginner’s Guide To Nuxt 3/

...

/

Head Metadata

Head Metadata

Learn how to add metadata to the head section of our applications pages.

We'll cover the following...

With a regular HTML document, we can add metadata and information about our app in the <head> section. In addition, we can also add scripts or styles to include on the page. By default, Nuxt provides some defaults which we can override if we want:

  • charset: utf-8

  • viewport: width=device-width, initial-scale=1

Adding the <head> element globally

With Nuxt, we can add data to the <head> globally in the nuxt.config.ts:

Press + to interact
export default defineNuxtConfig({
  runtimeConfig: {
      public: {
          pixabayApiKey: process.env.PIXABAY_API_KEY
      }
  },
	modules: ["@nuxt/image-edge"],
	app: {
		pageTransition: { name: "custom", mode: "out-in" },
		head: {
			meta: [
				{ name: "viewport", content: "width=device-width, initial-scale=1" },
			],
			script: [
				{ src: "https://javascript-library.js" },
			],
			link: [
				{ rel: "stylesheet", href: "https://css-library.css" },
			],
		},
	},
});

...