△ nuxt-unhead

Experimental features for Nuxt v3 head management. Powered by Unhead.

Status: Unhead v1.1 Released Please report any issues 🐛 Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦 • Join Discord for help

ℹ️ Looking for a complete SEO solution? Check out Nuxt SEO Kit.

Features

Unlock all Unhead features and more:

• 🖥️ 0kb runtime tags useServerHead
• ✨ Automatic social share meta tags
• 🤖 Debug head tags component DebugHead
• 🌳 Fully typed Head Schema with href and src file auto-completion
• 🧩 Title template tokens: Use public runtime config in your templates: %s %titleSeperator %siteName.
• 🪝 Runtime hooks: head:tags, head:entries
• 📦 Load your asset files directly using aliases href: '~/assets/style.css' (Experimental)

Background

This module was built to test bug fixes as well as experimental new features which may land into the Nuxt core.

Install

npm install --save-dev nuxt-unhead

# Using yarn
yarn add --dev nuxt-unhead

Setup

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-unhead',
  ],
})

Module Configuration

Config key: unhead

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-unhead'],

  unhead: {
    // config (see below)
  },
  //...
})

Usage

Template Params

When defining your titleTemplate, title or meta content as strings, you can use tokens to reference values from your resolved runtime config.

For example, the default title template introduced by this module is %s %titleSeparator %siteName.

This uses the following:

• %s - The title of the page.
• %titleSeparator - runtimeConfig.public.titleSeparator
• %siteName - runtimeConfig.public.siteName

To provide the values for these tokens, you can update them in your nuxt config.

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      siteName: 'My cool site',
      titleSeparator: '|',
    }
  },
})

You can read more about this feature on the docs: Unhead Template Params.

Config

seoOptimise

• Type: boolean

• Default: true

  Automatically optimise meta tags for SEO.

  It will automatically infer the og:title, og:description when a title and description are set respectively. It will ensure a twitter:card is set to summary_large_image if not set.

  This will do more in the future.

resolveAliases - EXPERIMENTAL

• Type: boolean

• Default: false

  Resolve aliases in href and src attributes. This will allow you to load your asset files directly using aliases.

  <script lang="ts" setup>
  useHead({
    link: [
      {
        rel: 'stylesheet',
        href: '~/assets/style.css',
      },
    ]
  })
  </script>

Components

DebugHead

A component to debug your head tags.

<template>
  <DebugHead />
</template>

Sponsors

License

MIT License © 2022-PRESENT Harlan Wilton