useHead / Page Meta

The module auto-imports an Ionic-compatible implementation of Nuxt's useHead composable. Ionic keeps inactive pages mounted, so Vue's unmount hooks cannot reliably remove their head entries.

Inside a component, the composable associates each head entry with the current route. It disposes the route's entries on onIonViewDidLeave and restores them on onIonViewDidEnter.

Usage

Use it like the standard Nuxt composable:

<script setup lang="ts">
const route = useRoute()

useHead({
  title: () => `Product ${route.params.id}`,
  meta: [
    {
      name: 'description',
      content: 'View product details',
    },
  ],
})
</script>

Usage outside components

Since nuxt-modules/ionic#825, useHead also works without an active component instance. This is required by Nuxt plugins and modules such as @nuxtjs/i18n.

export default defineNuxtPlugin(() => {
  useHead({
    titleTemplate: title => title ? `${title} · My App` : 'My App',
  })
})

Without a component instance, the composable skips useRoute, useRouter, and the component lifecycle hooks. The head entry is registered directly and remains active until it is patched or disposed.

The composable returns an entry with patch() and dispose() methods, matching the standard useHead API.