nuxt-hedge v0.6.1
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
andsrc
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 atwitter:card
is set tosummary_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.
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago