unhead-vue-skilld

Manage Vue.js HTML head elements with @unhead/vue for SEO and performance.

174|8|Updated Feb 18, 2026

Search Tags:#vue #scripts #seo #ssr #meta tags #head management

Ready to run

npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill unhead-vue-skilld

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: unhead-vue-skilld
Source: https://github.com/harlan-zw/vue-ecosystem-skills/tree/main/skills/unhead-vue-skilld
Command: npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill unhead-vue-skilld

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you manage your Vue application's HTML <head> section, ensuring optimal SEO and performance by providing a structured way to handle titles, meta tags, scripts, and more.

Core Features & Use Cases

SSR-Safe Titles: Dynamically set page titles that work correctly in server-side rendering.
SEO Meta Tags: Easily manage Open Graph, Twitter Card, and other SEO-critical meta tags.
Script Management: Load and manage external scripts with lifecycle control.
Use Case: Automatically update the <title> and <meta name="description"> tags for each page in your Vue app based on component data, ensuring search engines and social platforms display accurate information.

Quick Start

Use the unhead-vue-skilld to set the page title to 'My Awesome Vue App'.

Frequently Asked Questions about unhead-vue-skilld

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage Vue meta tags for SEO and dynamic page titles?▼

You can manage Vue meta tags dynamically by leveraging @unhead/vue to update titles, Open Graph tags, and descriptions reactively based on component data, ensuring search engines display accurate information.

Does this approach for head management work with Vue SSR environments?▼

Yes, this head management approach supports both server-side rendering (SSR) and client-side rendering (CSR). It provides SSR-safe titles and uses lifecycle hooks to ensure proper HTML head manipulation across environments.

What is the best way to load external scripts in a Vue application?▼

The best way to load external scripts is using a dedicated head management library that provides script lifecycle control, allowing you to inject, manage, and remove external scripts dynamically within your Vue components.

How do I update Open Graph and Twitter Card meta tags per page in Vue?▼

You update Open Graph and Twitter Card meta tags by binding them to your component's reactive data using @unhead/vue, ensuring social platforms crawl and display the correct metadata for each specific page.

Why are my Vue SSR page titles not rendering correctly on the server?▼

Vue SSR page titles often fail when using client-only head management tools. You need an SSR-safe head management solution that explicitly handles server-side rendering lifecycles to output correct titles before client hydration.