---
title: "init Hook"
description: "Learn about the initialization hook in Unhead that's called when a head instance is created"
deprecated: true
navigation:
  title: "init"
---

The `init` hook is called when a new Unhead instance is created and initialized. This hook provides a great opportunity to set up any global configurations or initial state needed for your head management.

## Hook Signature

```ts
export interface Hook {
  init: (ctx: Unhead<any>) => HookResult
}
```

### Parameters

| Name | Type | Description |
|------|------|-------------|
| `ctx` | `Unhead<any>` | The Unhead instance that has been initialized |

### Returns

`HookResult` which is either `void` or `Promise<void>`

## Usage Example

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

const head = createHead({
  hooks: {
    init: (head) => {
      // Log when head instance is initialized
      console.log('Unhead instance has been initialized!')

      // Set up any initial configuration
      head.push({
        title: 'Default Page Title',
        meta: [
          { name: 'description', content: 'Default page description' }
        ]
      })
    }
  }
})
```

## Use Cases

### Setting Default Head Configuration

Use the `init` hook to set default head configuration values that should be applied across your entire application:

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

export const defaultMetaPlugin = defineHeadPlugin({
  hooks: {
    init: (head) => {
      head.push({
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { name: 'format-detection', content: 'telephone=no' }
        ]
      })
    }
  }
})
```

### Initializing Third-party Services

The `init` hook is also useful for initializing third-party services that need to be configured when your application starts:

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

export const analyticsInitPlugin = defineHeadPlugin({
  hooks: {
    init: (head) => {
      // Configure analytics service
      if (!head.ssr) {
        window.dataLayer = window.dataLayer || []
        window.gtag = function (args) {
          window.dataLayer.push(...args)
        }
        gtag('js', new Date())
        gtag('config', 'G-XXXXXXXXXX')
      }
    }
  }
})
```