CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxt

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

head.mddocs/

Head Management

Document head management with reactive updates, SEO optimization, and server-side rendering support. Nuxt provides comprehensive utilities for managing meta tags, titles, and other head elements with full SSR support.

Capabilities

Basic Head Management

Manage document head elements with reactive updates.

/**
 * Manage document head with reactive updates
 * @param meta - Meta object or reactive reference to meta object
 */
function useHead(meta: MaybeComputedRef<MetaObject>): void;

/**
 * Safe version of useHead that sanitizes input
 * @param meta - Meta object or reactive reference to meta object
 */
function useHeadSafe(meta: MaybeComputedRef<MetaObject>): void;

/**
 * Inject head client directly for advanced usage
 * @returns HeadClient instance
 */
function injectHead(): HeadClient;

interface MetaObject {
  /** Page title */
  title?: MaybeComputedRef<string>;
  /** Title template for dynamic titles */
  titleTemplate?: MaybeComputedRef<string | ((title?: string) => string)>;
  /** Meta tags */
  meta?: MaybeComputedRef<MetaObjectRaw[]>;
  /** Link tags */
  link?: MaybeComputedRef<LinkObject[]>;
  /** Style tags */
  style?: MaybeComputedRef<StyleObject[]>;
  /** Script tags */
  script?: MaybeComputedRef<ScriptObject[]>;
  /** Noscript tags */
  noscript?: MaybeComputedRef<NoscriptObject[]>;
  /** Base tag */
  base?: MaybeComputedRef<BaseObject>;
  /** Body attributes */
  bodyAttrs?: MaybeComputedRef<Record<string, any>>;
  /** HTML attributes */
  htmlAttrs?: MaybeComputedRef<Record<string, any>>;
}

interface MetaObjectRaw {
  name?: string;
  property?: string;
  "http-equiv"?: string;
  content?: string;
  charset?: string;
  [key: string]: any;
}

Usage Examples:

// Basic title and meta
useHead({
  title: "My Page Title",
  meta: [
    { name: "description", content: "Page description" },
    { name: "keywords", content: "nuxt, vue, ssr" }
  ]
});

// Reactive head management
const pageTitle = ref("Dynamic Title");
const pageDescription = ref("Dynamic description");

useHead({
  title: pageTitle,
  meta: [
    { name: "description", content: pageDescription }
  ]
});

// Title template
useHead({
  titleTemplate: (title) => title ? `${title} - My App` : "My App"
});

// Complex head configuration
useHead({
  title: "Article Title",
  meta: [
    { name: "description", content: "Article description" },
    { name: "author", content: "John Doe" },
    { name: "robots", content: "index,follow" },
    { property: "og:title", content: "Article Title" },
    { property: "og:description", content: "Article description" },
    { property: "og:image", content: "/images/article.jpg" },
    { property: "og:type", content: "article" },
    { name: "twitter:card", content: "summary_large_image" }
  ],
  link: [
    { rel: "canonical", href: "https://example.com/article" },
    { rel: "alternate", hreflang: "es", href: "https://example.com/es/article" }
  ]
});

// Safe head management (auto-sanitized)
useHeadSafe({
  title: userInput, // Will be sanitized
  meta: [
    { name: "description", content: userDescription } // Will be sanitized
  ]
});

SEO Meta Management

Specialized utilities for SEO-focused meta tag management.

/**
 * Manage SEO-specific meta tags
 * @param meta - SEO meta object
 */
function useSeoMeta(meta: MaybeComputedRef<SeoMetaObject>): void;

interface SeoMetaObject {
  /** Page title */
  title?: MaybeComputedRef<string>;
  /** Meta description */
  description?: MaybeComputedRef<string>;
  /** Keywords */
  keywords?: MaybeComputedRef<string | string[]>;
  /** Author */
  author?: MaybeComputedRef<string>;
  /** Robots directive */
  robots?: MaybeComputedRef<string>;
  /** Copyright */
  copyright?: MaybeComputedRef<string>;
  /** Language */
  language?: MaybeComputedRef<string>;
  /** Theme color */
  themeColor?: MaybeComputedRef<string>;
  /** Color scheme */
  colorScheme?: MaybeComputedRef<string>;
  /** Viewport */
  viewport?: MaybeComputedRef<string>;
  /** Canonical URL */
  canonical?: MaybeComputedRef<string>;
  
  // Open Graph
  /** OG title */
  ogTitle?: MaybeComputedRef<string>;
  /** OG description */
  ogDescription?: MaybeComputedRef<string>;
  /** OG image */
  ogImage?: MaybeComputedRef<string | OgImageObject>;
  /** OG URL */
  ogUrl?: MaybeComputedRef<string>;
  /** OG type */
  ogType?: MaybeComputedRef<string>;
  /** OG site name */
  ogSiteName?: MaybeComputedRef<string>;
  /** OG locale */
  ogLocale?: MaybeComputedRef<string>;
  
  // Twitter
  /** Twitter card type */
  twitterCard?: MaybeComputedRef<string>;
  /** Twitter title */
  twitterTitle?: MaybeComputedRef<string>;
  /** Twitter description */
  twitterDescription?: MaybeComputedRef<string>;
  /** Twitter image */
  twitterImage?: MaybeComputedRef<string>;
  /** Twitter site */
  twitterSite?: MaybeComputedRef<string>;
  /** Twitter creator */
  twitterCreator?: MaybeComputedRef<string>;
}

interface OgImageObject {
  url: string;
  width?: number;
  height?: number;
  alt?: string;
  type?: string;
}

Usage Examples:

// Basic SEO meta
useSeoMeta({
  title: "My Page",
  description: "Comprehensive description of my page content",
  keywords: ["nuxt", "vue", "ssr", "framework"],
  author: "John Doe",
  robots: "index,follow"
});

// Social media optimization
useSeoMeta({
  title: "Amazing Article",
  description: "This article will change your perspective on web development",
  
  // Open Graph
  ogTitle: "Amazing Article - My Blog",
  ogDescription: "This article will change your perspective on web development",
  ogImage: {
    url: "https://example.com/images/article-cover.jpg",
    width: 1200,
    height: 630,
    alt: "Article cover image"
  },
  ogUrl: "https://example.com/articles/amazing-article",
  ogType: "article",
  ogSiteName: "My Blog",
  ogLocale: "en_US",
  
  // Twitter
  twitterCard: "summary_large_image",
  twitterTitle: "Amazing Article",
  twitterDescription: "This article will change your perspective",
  twitterImage: "https://example.com/images/article-cover.jpg",
  twitterSite: "@myblog",
  twitterCreator: "@johndoe"
});

// Reactive SEO meta
const article = ref({
  title: "Dynamic Article",
  description: "Dynamic description",
  image: "/images/default.jpg"
});

useSeoMeta({
  title: () => article.value.title,
  description: () => article.value.description,
  ogImage: () => article.value.image,
  twitterImage: () => article.value.image
});

// E-commerce product SEO
const product = await useFetch(`/api/products/${route.params.id}`);

useSeoMeta({
  title: () => `${product.data.value?.name} - Shop`,
  description: () => product.data.value?.description,
  keywords: () => product.data.value?.tags,
  ogType: "product",
  ogImage: () => product.data.value?.images[0],
  ogPrice: () => product.data.value?.price,
  ogCurrency: "USD"
});

Server-Side Head Management

Server-only head management utilities.

/**
 * Server-only head management
 * @param meta - Meta object for server-side rendering
 */
function useServerHead(meta: MaybeComputedRef<MetaObject>): void;

/**
 * Safe server-only head management
 * @param meta - Meta object for server-side rendering
 */
function useServerHeadSafe(meta: MaybeComputedRef<MetaObject>): void;

/**
 * Server-only SEO meta management
 * @param meta - SEO meta object for server-side rendering
 */
function useServerSeoMeta(meta: MaybeComputedRef<SeoMetaObject>): void;

Usage Examples:

// Server-only head management
if (process.server) {
  useServerHead({
    script: [
      {
        innerHTML: `
          window.serverData = ${JSON.stringify(serverData)};
        `
      }
    ]
  });
}

// Server-side SEO optimization
useServerSeoMeta({
  title: () => `${pageData.title} - ${siteName}`,
  description: () => pageData.description,
  canonical: () => `${baseUrl}${route.path}`,
  
  // Generate structured data on server
  script: [
    {
      type: "application/ld+json",
      innerHTML: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": pageData.title,
        "description": pageData.description,
        "author": pageData.author,
        "datePublished": pageData.publishedAt
      })
    }
  ]
});

// Server-side analytics
useServerHead({
  script: [
    {
      src: "https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID",
      async: true
    },
    {
      innerHTML: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID');
      `
    }
  ]
});

Advanced Head Management Patterns

// Conditional head management
const isDarkMode = useCookie("theme", { default: () => "light" });

useHead({
  htmlAttrs: {
    "data-theme": isDarkMode
  },
  meta: [
    {
      name: "theme-color",
      content: () => isDarkMode.value === "dark" ? "#1a1a1a" : "#ffffff"
    }
  ]
});

// Localized head management
const { locale, t } = useI18n();

useHead({
  htmlAttrs: {
    lang: locale
  },
  title: () => t("page.title"),
  meta: [
    { name: "description", content: () => t("page.description") },
    { property: "og:locale", content: locale }
  ]
});

// Progressive enhancement
const supportsWebP = ref(false);

onMounted(async () => {
  supportsWebP.value = await checkWebPSupport();
});

useHead({
  link: [
    {
      rel: "preload",
      as: "image",
      href: () => supportsWebP.value ? "/hero.webp" : "/hero.jpg"
    }
  ]
});

// Performance optimization
useHead({
  link: [
    // DNS prefetch
    { rel: "dns-prefetch", href: "//fonts.googleapis.com" },
    { rel: "dns-prefetch", href: "//api.example.com" },
    
    // Preconnect
    { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
    
    // Resource hints
    { rel: "prefetch", href: "/next-page" },
    { rel: "preload", href: "/critical.css", as: "style" },
    { rel: "preload", href: "/hero.jpg", as: "image" }
  ]
});

// Error page head
const error = useError();

watch(error, (newError) => {
  if (newError) {
    useHead({
      title: `Error ${newError.statusCode}`,
      meta: [
        { name: "robots", content: "noindex,nofollow" }
      ]
    });
  }
});

Dynamic Script and Style Management

// Dynamic script loading
const loadGoogleMaps = ref(false);

useHead({
  script: [
    {
      src: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY",
      async: true,
      onload: "window.initMap()",
      condition: () => loadGoogleMaps.value
    }
  ]
});

// Conditional styles
const isHighContrast = useCookie("high-contrast", { default: () => false });

useHead({
  style: [
    {
      innerHTML: `
        :root {
          --text-color: ${isHighContrast.value ? "#000" : "#333"};
          --bg-color: ${isHighContrast.value ? "#fff" : "#f5f5f5"};
        }
      `
    }
  ]
});

// Third-party integrations  
const enableAnalytics = ref(true);

useHead({
  script: [
    {
      src: "https://www.googletagmanager.com/gtag/js?id=GA_ID",
      async: true,
      condition: () => enableAnalytics.value
    },
    {
      innerHTML: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA_ID');
      `,
      condition: () => enableAnalytics.value
    }
  ]
});

Types

type MaybeComputedRef<T> = T | Ref<T> | ComputedRef<T> | (() => T);

interface HeadClient {
  push(input: MetaObject): ActiveHeadEntry;
  resolveTags(): HeadTag[];
}

interface ActiveHeadEntry {
  dispose(): void;
  patch(input: MetaObject): void;
}

interface HeadTag {
  tag: string;
  attrs: Record<string, any>;
  innerHTML?: string;
  textContent?: string;
}

interface LinkObject {
  rel?: string;
  href?: string;
  type?: string;
  media?: string;
  sizes?: string;
  color?: string;
  title?: string;
  as?: string;
  crossorigin?: string;
  referrerpolicy?: string;
  integrity?: string;
  hreflang?: string;
  [key: string]: any;
}

interface StyleObject {
  innerHTML?: string;
  textContent?: string;
  media?: string;
  type?: string;
  [key: string]: any;
}

interface ScriptObject {
  src?: string;
  innerHTML?: string;
  textContent?: string;
  type?: string;
  async?: boolean;
  defer?: boolean;
  crossorigin?: string;
  integrity?: string;
  nomodule?: boolean;
  nonce?: string;
  referrerpolicy?: string;
  onload?: string;
  onerror?: string;
  condition?: () => boolean;
  [key: string]: any;
}

interface NoscriptObject {
  innerHTML?: string;
  textContent?: string;
  [key: string]: any;
}

interface BaseObject {
  href?: string;
  target?: string;
  [key: string]: any;
}

Install with Tessl CLI

npx tessl i tessl/npm-nuxt

docs

app-lifecycle.md

configuration.md

core.md

data-fetching.md

head.md

index.md

module-dev.md

navigation.md

performance.md

ssr.md

state.md

tile.json