Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dvlkit/nuxe/llms.txt

Use this file to discover all available pages before exploring further.

Nuxe re-exports three composables from @unhead/vue to manage the document <head> declaratively inside setup(). All three are auto-imported in Nuxe projects — no explicit import is needed. They are reactive: passing a computed or ref value updates the head element automatically when the value changes, including across client-side navigations.
All three composables are powered by @unhead/vue under the hood and are auto-imported throughout your Nuxe application. You do not need to import them manually.

​
useHead

Sets arbitrary <head> entries for the current route. Accepts an object whose keys map to standard HTML head elements.

​
Signature

useHead(input: HeadEntryInput): void

​
Common fields

FieldTypeDescription
titlestring | ComputedRef<string>Sets <title>.
metaArray<{ name?: string; property?: string; content: string }>Adds <meta> tags.
linkArray<{ rel: string; href: string; [key: string]: string }>Adds <link> tags (e.g. canonical, stylesheet).
scriptArray<{ src?: string; innerHTML?: string; [key: string]: string }>Adds <script> tags.
htmlAttrsRecord<string, string>Attributes placed on the <html> element.
bodyAttrsRecord<string, string>Attributes placed on the <body> element.

​
Example

<script setup lang="ts">
const route = useRoute()

useHead({
  title: `Post — ${route.params.slug}`,
  meta: [
    { name: 'description', content: 'An article about Vue 3 meta-frameworks.' },
    { property: 'og:type', content: 'article' },
  ],
  link: [
    { rel: 'canonical', href: `https://example.com/posts/${route.params.slug}` },
  ],
})
</script>

​
Reactive title

<script setup lang="ts">
const { data: post } = await useFetch('/api/posts/1')

useHead(computed(() => ({
  title: post.value?.title ?? 'Loading…',
})))
</script>

​
useHeadSafe

A sanitized variant of useHead that strips potentially dangerous HTML to prevent cross-site scripting (XSS) attacks. Use this whenever any part of the head input is derived from user-supplied or third-party content.

​
Signature

useHeadSafe(input: HeadEntryInput): void
The API is identical to useHead. Internally @unhead/vue escapes values before injecting them into the DOM or SSR HTML.
Always prefer useHeadSafe over useHead when the title, meta[content], or any other field value originates from user input, a CMS, or an external API. Raw useHead does not sanitize its input.

​
Example

<script setup lang="ts">
// Title comes from a user-editable CMS — use useHeadSafe
const { data: article } = await useFetch('/api/articles/1')

useHeadSafe(computed(() => ({
  title: article.value?.title,
  meta: [
    { name: 'description', content: article.value?.summary },
  ],
})))
</script>

​
useSeoMeta

A fully-typed helper for the most common SEO and Open Graph meta tags. Instead of crafting raw <meta> objects, you pass a flat object with named fields — @unhead/vue maps them to the correct name / property attributes automatically.

​
Signature

useSeoMeta(input: SeoMetaInput): void

​
Common fields

FieldTypeDescription
titlestringSets <title> and og:title.
descriptionstringSets <meta name="description">.
ogTitlestringSets <meta property="og:title">.
ogDescriptionstringSets <meta property="og:description">.
ogImagestringSets <meta property="og:image">.
ogUrlstringSets <meta property="og:url">.
ogTypestringSets <meta property="og:type"> (e.g. 'website', 'article').
twitterCard'summary' | 'summary_large_image' | 'app' | 'player'Sets <meta name="twitter:card">.
twitterTitlestringSets <meta name="twitter:title">.
twitterDescriptionstringSets <meta name="twitter:description">.
twitterImagestringSets <meta name="twitter:image">.

​
Example

<script setup lang="ts">
const { data: product } = await useFetch('/api/products/42')

useSeoMeta({
  title: product.value?.name,
  description: product.value?.summary,
  ogTitle: product.value?.name,
  ogDescription: product.value?.summary,
  ogImage: product.value?.imageUrl,
  ogType: 'product',
  twitterCard: 'summary_large_image',
})
</script>
Use useSeoMeta for Open Graph and Twitter Card tags. Its typed fields prevent common mistakes like misspelling og:descriptoin. Fall back to useHead (or useHeadSafe) for less common tags that useSeoMeta does not cover.

Build docs developers (and LLMs) love

Get started for freeTalk to us