Getting Meta with Nuxt 3

With Nuxt 3 we get some simple ways to update our meta tags, <head> and <body>.

You can do it from within the template with the meta components:

<template>
  <Head>
    <Title>{{ data }}</Title>
  </Head>
  <Body class="body-class"></Body>
  <!-- ...rest of the component here -->
</template>

Or using the useMeta composable that is globally available:

<script setup>
const data = await useFetch("/api/stuff");
useMeta({
  title: data,
  bodyAttrs: {
    class: "body-class",
  },
});
</script>

There's a lot more you can do with meta tags in Nuxt 3. Check it out on the docs.

Related Articles