nuxt-hedge

🌳 nuxt-hedge

Nuxt v3 head-edge module to play with new experimental features.

Status: Early Access Please report any issues 🐛 Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦 • Join Discord for help

Features

• 💎 Latest @vueuse/head: Computed getters, XSS protection, improved performance and more
• 🧙 Define your meta tags as a flat object useMetaTags
• ✨ Automatic social share meta tags
• 🤖 Debug head tags component DebugHead
• 🍣 Handle raw un-encoded tags with useHeadRaw
• 🌳 Fully typed Head Schema with href and src file auto-completion
• 🪝 Runtime hooks: head:tags, head:entries

Coming soon:

• 🪝 More runtime hooks: head:dom:render, head:ssr:render
• 📦 Support resolving aliases
• 🖥️ Server Only Head tags

Background

I'm the maintainer of @vueuse/head and zhead.

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

While it should be relatively safe for production use, it will be updated frequently and may lose parity with the Nuxt meta module, use with caution.

Install

npm install --save-dev nuxt-hedge

# Using yarn
yarn add --dev nuxt-hedge

Register Module

This module replaces the internal Nuxt meta module, so the setup is slightly different.

nuxt.config.ts

export default defineNuxtConfig({
  // ...
  hooks: {
    'modules:before': async ({ nuxt }) => {
      // swap out the nuxt internal module for nuxt-hedge
      for (const k in nuxt.options._modules) {
        if (typeof nuxt.options._modules[k] === 'function' && (await nuxt.options._modules[k].getMeta()).name === 'meta')
          nuxt.options._modules[k] = 'nuxt-hedge'
      }
    },
  },
})

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.

Composables

useHead

Usage of the composable remains mostly the same. This version offers better TypeScript and XSS presentation support.

The children property is has been deprecated in favor of textContent.

Read the useHead docs for more details.

useHead({
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  ],
  style: [
    {
      textContent: 'body { background-color: red; }',
    }
  ]
})

useHeadRaw

useMetaTags

Define your meta tags as a flat object. This function is automatically imported for you.

Behind the scenes, this unpacks your meta tags and adds them as if you used useHead directly.

Powered by packrup and zhead.

useMetaTags({
  ogImage: "https://nuxtjs.org/meta_400.png",
  ogUrl: "https://nuxtjs.org",
  ogSiteName: "NuxtJS",
  ogType: "website",
  ogLocale: "en_US",
  ogLocaleAlternate: "fr_FR",
  twitterSite: "@nuxt_js",
})

Components

DebugHead

A component to debug your head tags.

<template>
  <DebugHead />
</template>

Sponsors

License

MIT License © 2022-PRESENT Harlan Wilton