skills.rest
harlan-zw
harlan-zwCOMMUNITY
Explore all skills by this author →
Website𝕏@harlan_zwGitHub

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
One-click install
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill unhead-vue-skilld
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
4tikhonov4tikhonov
3

project-init

Initialize a FIRE project by detecting workspace type and generating standards templates.

Community
Basic
686f6c61686f6c61
105

meta-tags

Audit page URLs and generate corrected HTML meta tag snippets.

Community
Intermediate
belos-streetbelos-street
8

vue-router-best-practices

Resolve Vue Router 4 navigation guard and route lifecycle issues.

Community
Intermediate
the-perfect-developerthe-perfect-developer
11

alpinejs

Add declarative interactivity to HTML using Alpine.js core directives.

Community
Intermediate