Title & meta ​

Overview ​

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

Installation ​

Add @vueuse/head to your dependencies:

npm i -D @vueuse/head

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 '@vueuse/head' 

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

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 page components.

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

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

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

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

For more information regarding the functionalities of @vueuse/head, refer to its documentation.