Title & meta

Overview

Hybridly doesn't ship with any tool to manage the title or other meta tags of your views. Instead, we recommend using @unhead/vue. It is simple of use and supports SSR.

Installation

Add @unhead/vue to your dependencies:

npm i -D @unhead/vue

In main.ts, import createHead and register its return value as a plugin.

import { createApp } from 'vue'
import { initializeHybridly } from 'virtual:hybridly/config'
import { createHead } from '@unhead/vue'

initializeHybridly({
  enhanceVue: (vue) => {
    const head = createHead()
    head.push({titleTemplate: (title) => title ? `${title} - Blue Bird` : 'Blue Bird'})
    vue.use(head)
  }
})

createHead may be used to define a default titleTemplate callback that will be active for the entire application.

Usage

The latest useHead call is persisted, which means you may override titleTemplate on a layout.

Page titles may be defined using the title property in view components.

layouts/default.vue

<script setup lang="ts">
useHead({
	titleTemplate: (title) => `${title} - Blue Bird`,
})
</script>

<template>
  <!-- Some layout here -->
  <slot />
</template>

chirps/index.vue

<script setup lang="ts">
useHead({
	title: 'Recent chirps', // Recent chirps - Blue Bird
})
</script>

<template layout="default">
  <!-- view component -->
</template>

For more information regarding the functionalities of @unhead/vue, refer to its documentation.