🌳 nuxt-hedge
Nuxt v3 head-edge module to play with new experimental features.
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
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 }) => {
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>
License
MIT License © 2022-PRESENT Harlan Wilton