### Define HowTo Guide with Detailed Steps using @unhead/schema-org (TypeScript)

Source: https://unhead.unjs.io/llms-full.txt

Provides an example of structuring a How-To guide with granular steps using `HowToStep` and `HowToDirection` types. This approach allows for detailed instructions and sub-steps within a How-To Schema, managed by the @unhead/schema-org library.

```ts
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/@framework'

useSchemaOrg([
  defineHowTo({
    name: 'How to Change a Flat Tire',
    description: 'A comprehensive guide to safely changing a flat tire.',
    step: [
      {
        '@type': 'HowToStep',
        'name': 'Prepare your vehicle',
        'itemListElement': [
          {
            '@type': 'HowToDirection',
            'text': 'Park your car on flat, stable ground'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Apply the parking brake'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Turn on hazard lights'
          }
        ]
      },
      {
        '@type': 'HowToStep',
        'name': 'Remove the flat tire',
        'itemListElement': [
          {
            '@type': 'HowToDirection',
            'text': 'Loosen lug nuts with a lug wrench'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Use a jack to lift the vehicle'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Remove the lug nuts completely'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Remove the flat tire'
          }
        ]
      }
    ]
  })
])
```

--------------------------------

### Define WebPage Example

Source: https://unhead.unjs.io/llms-full.txt

A basic example of defining a WebPage with `name` and `image` properties.

```ts
defineWebPage({
  name: 'Page Title',
  image: '/image.jpg',
})
```

--------------------------------

### Canonical Plugin: Setup

Source: https://unhead.unjs.io/llms-full.txt

Shows how to install and configure the Canonical Plugin by adding it to the Unhead instance during creation.

```ts
import { CanonicalPlugin } from 'unhead/plugins'

const head = createHead({
  plugins: [
    CanonicalPlugin({
      canonicalHost: 'https://mysite.com'
    })
  ]
})
```

--------------------------------

### Define Course Example

Source: https://unhead.unjs.io/llms-full.txt

Illustrates how to define a Schema.org Course using the `defineCourse` function. The example includes course name, description, and provider details.

```ts
defineCourse({
  name: 'Introduction to Computer Science and Programming',
  description: 'Introductory CS course laying out the basics.',
  provider: {
    name: 'University of Technology - Eureka',
    sameAs: 'http://www.ut-eureka.edu',
  },
})
```

--------------------------------

### SoftwareApp Example Usage

Source: https://unhead.unjs.io/llms-full.txt

Provides a concrete example of how to use the `defineSoftwareApp` function to generate structured data for a software application. This example includes common properties like name, operating system, application category, aggregate rating, and offer details.

```ts
defineSoftwareApp({
  name: 'Angry Birds',
  operatingSystem: 'ANDROID',
  applicationCategory: 'GameApplication',
  aggregateRating: {
    ratingValue: '4.6',
    ratingCount: 8864,
  },
  offers: {
    price: '1.00',
    priceCurrency: 'USD',
  },
})
```

--------------------------------

### Basic SEO Setup with useHead and useSeoMeta

Source: https://unhead.unjs.io/docs/head/guides/get-started/starter-recipes

Demonstrates how to set up essential SEO tags using Unhead's `useHead` and `useSeoMeta` composables. Includes language attribute, canonical URL, title, title template, and meta description.

```javascript
import { useHead, useSeoMeta } from 'unhead'

// Assuming unheadInstance is initialized elsewhere
// const unheadInstance = createHead()

useHead(unheadInstance, {
  htmlAttrs: { lang: 'en-US' }, // BCP 47 language code
  link: [
    {
      rel: 'canonical',
      content: 'https://www.example.com/product'
    }
  ]
})

useSeoMeta(unheadInstance, {
  title: 'About Us',
  titleTemplate: '%s -  Site',
  description: 'Learn about our awesome site.',
})
```

--------------------------------

### Unhead API - Get Started

Source: https://unhead.unjs.io/docs/vue/head/guides/get-started/installation

Guides for getting started with Unhead, including overview, installation, and migration steps. It also introduces the basic concepts and starter recipes for common use cases.

```APIDOC
Unhead API Documentation - Get Started:

1.  **Overview**
    -   Introduction to Unhead and its purpose in managing head elements.
    -   Key features and benefits.

2.  **Installation**
    -   Instructions for installing Unhead for different frameworks (Vue, Nuxt, etc.).
    -   Package manager commands (npm, yarn, pnpm).

3.  **Upgrade Guide**
    -   Steps and considerations for migrating from older versions of Unhead.
    -   Breaking changes and compatibility notes.

4.  **Introduction to Unhead**
    -   Deeper dive into the library's architecture and philosophy.
    -   How Unhead integrates with your application's rendering lifecycle.

5.  **Starter Recipes**
    -   Pre-built configurations and examples for common scenarios.
    -   Examples: SEO optimization, social media meta tags, analytics scripts.
```

--------------------------------

### ID Transformer Example

Source: https://unhead.unjs.io/llms-full.txt

Shows how the ID transformer resolves string IDs starting with '#' to use the canonical host or page path as a prefix, demonstrated with a Breadcrumb definition.

```ts
import { defineBreadcrumb } from '@unhead/schema-org/@framework'

defineBreadcrumb({
  '@id': '#subbreadcrumb',
  'itemListElement': [
    { name: 'Sub breadcrumb link', item: '/blog/test' },
  ],
})
```

```json
{
  "@id": "https://example.com/#subbreadcrumb",
  "@type": "BreadcrumbList"
}
```

--------------------------------

### Define HowTo Guide with Supplies and Steps using @unhead/schema-org (TypeScript)

Source: https://unhead.unjs.io/llms-full.txt

Illustrates creating a HowTo Schema markup for a desk building guide. This snippet uses the `defineHowTo` function to specify details like description, image, estimated cost, supplies, tools, and sequential steps.

```ts
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/@framework'

useSchemaOrg([
  defineHowTo({
    name: 'How to Build a Desk',
    description: 'A step-by-step guide to building a home office desk.',
    image: '/images/desk-building.jpg',
    estimatedCost: {
      currency: 'USD',
      value: '100'
    },
    supply: [
      'Wood panels',
      'Screws',
      'Hammer',
      'Nails'
    ],
    tool: [
      'Screwdriver',
      'Power drill',
      'Tape measure'
    ],
    step: [
      {
        name: 'Gather materials',
        text: 'Collect all necessary supplies and tools.',
        image: '/images/desk-materials.jpg',
        url: '/how-to-build-desk/materials'
      },
      {
        name: 'Cut wood panels',
        text: 'Cut the wood panels to the proper dimensions.',
        image: '/images/cutting-panels.jpg',
        url: '/how-to-build-desk/cutting'
      },
      {
        name: 'Assemble desk frame',
        text: 'Connect the panels to form the desk frame.',
        image: '/images/desk-frame.jpg',
        url: '/how-to-build-desk/assembly'
      },
      {
        name: 'Attach desk top',
        text: 'Secure the desk top to the frame.',
        image: '/images/desk-top.jpg',
        url: '/how-to-build-desk/finishing'
      }
    ]
  })
])
```

--------------------------------

### Resource Warmup Strategies

Source: https://unhead.unjs.io/docs/head/guides/core-concepts/loading-scripts

Explains how to optimize script loading by using resource hints like `preload`, `prefetch`, `preconnect`, and `dns-prefetch`. These strategies help establish connections or download resources before they are explicitly needed.

```javascript
import { useScript } from 'unhead'

useScript(unheadInstance, 'https://example.com/script.js', {
  // Choose a strategy
  warmupStrategy: 'preload' | 'prefetch' | 'preconnect' | 'dns-prefetch'
})
```

--------------------------------

### Unhead <Head> Component Quick Start

Source: https://unhead.unjs.io/llms-full.txt

A basic example of using the <Head> component from @unhead/react to manage the HTML document's head section within a React application.

```tsx
import { Head } from '@unhead/react'

function App() {
  return (
    <Head>
      <title>My Site</title>
      <meta name="description" content="Site description" />
    </Head>
  )
}
```

--------------------------------

### Comprehensive SEO Setup with useHead

Source: https://unhead.unjs.io/docs/head/guides/get-started/starter-recipes

Illustrates a more detailed SEO configuration using `useHead`, including HTML attributes, title, meta tags (description, robots), and link tags (canonical). This example shows how to manage multiple meta tags and control indexing.

```javascript
import { useHead } from 'unhead'

// Assuming unheadInstance is initialized elsewhere
// const unheadInstance = createHead()

useHead(unheadInstance, {
  htmlAttrs: { lang: 'en-US' }, // BCP 47 language code
  title: 'About Us | Company',
  titleTemplate: '%s -  Site',
  meta: [
    {
      name: 'description',
      content: 'Learn how to bake delicious, moist cupcakes with our easy-to-follow guide. Featuring tips and tricks for beginners.'
    },
    // disable indexing with robots 'noindex, nofollow'
    {
      name: 'robots',
      content: 'index, follow'
    }
  ],
  link: [
    {
      rel: 'canonical',
      content: 'https://www.example.com/product'
    }
  ]
})
```

--------------------------------

### JavaScript HowTo Definition Example

Source: https://unhead.unjs.io/docs/schema-org/api/schema/how-to

Demonstrates how to define a HowTo object using a JavaScript function `defineHowTo`. This snippet illustrates the structure for providing step-by-step instructions, including text, image URLs, and fragment identifiers for each step.

```javascript
defineHowTo({
  name: 'How to tie a tie',
  step: [
    {
      url: '#step-one',
      text: 'Button your shirt how you\'d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.',
      image: '/1x1/photo.jpg'
    },
    {
      url: '#step-two',
      text: 'Cross the long end over the short end. This will form the basis for your knot.',
      image: '/1x1/photo.jpg'
    },
    {
      url: '#step-three',
      text: 'Bring the long end back under the short end, then throw it back over the top of the short end in the other direction. ',
      image: '/1x1/photo.jpg'
    },
    {
      text: 'Now pull the long and through the loop near your neck, forming another loop near your neck.',
      image: '/1x1/photo.jpg'
    },
    {
      text: 'Pull the long end through that new loop and tighten to fit! ',
      image: '/1x1/photo.jpg'
    }
  ]
})
```

--------------------------------

### Unhead Schema.org API and Guides

Source: https://context7_llms

This section provides an overview of Unhead's Schema.org integration, including guides on getting started, core concepts like deduping nodes and supported nodes, and practical recipes for implementing Schema.org markup for various use cases such as blogs, e-commerce, FAQs, and site search.

```APIDOC
Unhead Schema.org Integration:

Guides:
- Overview: Learn more about Unhead Schema.org.
- Core Concepts:
  - Deduping Nodes: How to add multiple of the same node to your schema graph.
  - Supported Nodes: The nodes available for the Schema.org integration.
  - Params: Change the behaviour of your integration.
- Recipes:
  - Custom Nodes: Implement custom nodes for your Schema.org.
  - Identity: Choose an identity for your Schema.org.
  - Blog: Create Schema.org for a blog.
  - Breadcrumbs: Create breadcrumbs on your site.
  - eCommerce Sites: Implement Schema.org for eCommerce websites.
  - FAQ: Implement Schema.org FAQ markup.
  - How-To Content: Implement Schema.org for How-To content.
  - Site Search: Implement Schema.org markup for site search functionality.

API:
- useSchemaOrg(): How to use the useSchemaOrg composable.

Schema Types:
- Article
- Book
- Breadcrumb
```

--------------------------------

### Complete Script Loading Example with Options

Source: https://unhead.unjs.io/llms-full.txt

An end-to-end example showcasing various configurations for `useScript`, including `src`, `key`, attributes like `defer` and `async`, `crossorigin`, `referrerpolicy`, alongside `warmupStrategy` and a `trigger` promise. It also demonstrates proxy access, `onLoaded` callbacks, and `onError` handling.

```ts
import { useScript } from '@unhead/dynamic-import'

const analytics = useScript({
  src: 'https://example.com/analytics.js',
  key: 'analytics',
  defer: true,
  async: true,
  crossorigin: 'anonymous',
  referrerpolicy: 'no-referrer'
}, {
  warmupStrategy: 'preconnect',
  trigger: new Promise((resolve) => {
    // Load after user has been on page for 3 seconds
    setTimeout(resolve, 3000)
  })
})

// Track page view immediately (queued until script loads)
analytics.proxy.track('pageview')

// Access direct API after script is loaded
analytics.onLoaded(({ track }) => {
  // Do something with direct access
  const result = track('event', { category: 'engagement' })
  console.log('Event tracked:', result)
})

// Handle errors
analytics.onError((error) => {
  console.error('Failed to load analytics:', error)
})
```

--------------------------------

### Vue Options API Setup

Source: https://unhead.unjs.io/llms-full.txt

Guides on integrating Unhead with Vue's Options API by mixing in `VueHeadMixin`. This allows components to define head properties using the `head()` method or a plain object, enabling declarative head management for Options API users.

```ts
import { createApp } from './main'
import { createHead, VueHeadMixin } from '@unhead/vue/client'

const { app } = createApp()
const head = createHead()
app.use(head)
app.mixin(VueHeadMixin)

app.mount('#app')
```

```ts
import { createApp } from './main'
import { createHead, VueHeadMixin } from '@unhead/vue/server'

const { app } = createApp()
const head = createHead()
app.use(head)
app.mixin(VueHeadMixin)

app.mount('#app')
```

--------------------------------

### Define Question (Minimal Example)

Source: https://unhead.unjs.io/llms-full.txt

Shows the minimal configuration for `defineQuestion`, setting the question's text and its accepted answer.

```ts
defineQuestion({
  name: 'What is the meaning of life?',
  acceptedAnswer: '42',
})
```

--------------------------------

### Define Basic HowTo Schema

Source: https://unhead.unjs.io/docs/schema-org/guides/recipes/how-to

Demonstrates defining a basic 'HowTo' schema with essential properties like name, description, estimated cost, supplies, tools, and steps. This snippet showcases the fundamental structure for a 'HowTo' guide.

```typescript
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/typescript'
useSchemaOrg([
  defineHowTo({
    name: 'How to Build a Desk',
    description: 'A step-by-step guide to building a home office desk.',
    image: '/images/desk-building.jpg',
    estimatedCost: {
      currency: 'USD',
      value: '100'
    },
    supply: [
      'Wood panels',
      'Screws',
      'Hammer',
      'Nails'
    ],
    tool: [
      'Screwdriver',
      'Power drill',
      'Tape measure'
    ],
    step: [
      {
        name: 'Gather materials',
        text: 'Collect all necessary supplies and tools.',
        image: '/images/desk-materials.jpg',
        url: '/how-to-build-desk/materials'
      },
      {
        name: 'Cut wood panels',
        text: 'Cut the wood panels to the proper dimensions.',
        image: '/images/cutting-panels.jpg',
        url: '/how-to-build-desk/cutting'
      },
      {
        name: 'Assemble desk frame',
        text: 'Connect the panels to form the desk frame.',
        image: '/images/desk-frame.jpg',
        url: '/how-to-build-desk/assembly'
      },
      {
        name: 'Attach desk top',
        text: 'Secure the desk top to the frame.',
        image: '/images/desk-top.jpg',
        url: '/how-to-build-desk/finishing'
      }
    ]
  })
])
```

--------------------------------

### Define Image Function Example

Source: https://unhead.unjs.io/llms-full.txt

Provides a minimal example of how to use the `defineImage` function to create a Schema.org ImageObject with a URL.

```ts
defineImage({
  url: '/cat.jpg',
})
```

--------------------------------

### Define Product (Advanced Example)

Source: https://unhead.unjs.io/llms-full.txt

Illustrates an advanced configuration for `defineProduct`, including offers, aggregate rating, and review details, showcasing richer product data representation.

```ts
defineProduct({
  name: 'test',
  image: '/product.png',
  offers: [
    { price: 50 },
  ],
  aggregateRating: {
    ratingValue: 88,
    bestRating: 100,
    ratingCount: 20,
  },
  review: [
    {
      name: 'Awesome product!',
      author: {
        name: 'Harlan Wilton',
      },
      reviewRating: {
        ratingValue: 5,
      },
    },
  ],
})
```

--------------------------------

### useSeoMeta Complete SEO Setup

Source: https://unhead.unjs.io/llms-full.txt

Provides a comprehensive example of configuring a full suite of SEO meta tags using useSeoMeta, including basic SEO, Open Graph (OG) tags for social sharing, and Twitter-specific tags. It also shows how to include structured data properties like article author and publication time.

```ts
import { useSeoMeta } from '@unhead/dynamic-import'

useSeoMeta({
  // Basic SEO
  title: 'Product Name - Your Brand',
  description: 'Detailed product description optimized for search engines.',

  // Open Graph
  ogTitle: 'Product Name - Your Brand',
  ogDescription: 'Engaging description for social media shares.',
  ogImage: 'https://example.com/product-social.jpg',
  ogUrl: 'https://example.com/products/my-product',
  ogType: 'product',
  ogSiteName: 'Your Brand',

  // Twitter
  twitterTitle: 'Product Name - Your Brand',
  twitterDescription: 'Engaging description for Twitter shares.',
  twitterImage: 'https://example.com/product-twitter.jpg',
  twitterCard: 'summary_large_image',

  // Product specific (structured data will be generated)
  articleAuthor: 'Author Name',
  articlePublishedTime: '2023-01-01',
  articleModifiedTime: '2023-02-15',
})
```

--------------------------------

### useScript Resource Hint Strategies

Source: https://unhead.unjs.io/llms-full.txt

Shows how to use the `warmupStrategy` option to implement resource hints like preload, prefetch, preconnect, and dns-prefetch for script optimization.

```ts
import { useScript } from '@unhead/dynamic-import'

useScript('https://example.com/script.js', {
  // Preload - highest priority, load ASAP
  warmupStrategy: 'preload',

  // Prefetch - load when browser is idle
  warmupStrategy: 'prefetch',

  // Preconnect - setup connection early
  warmupStrategy: 'preconnect',

  // DNS Prefetch - resolve DNS early
  warmupStrategy: 'dns-prefetch'
})
```

--------------------------------

### Install @unhead/vue Dependency

Source: https://unhead.unjs.io/llms-full.txt

Installs the core @unhead/vue package, which provides first-class support for Unhead within Vue applications. This package is essential for integrating Unhead's meta tag management capabilities into your Vue setup.

```bash
yarn add -D @unhead/vue
```