Nuxt V3 Title Template (Page Title with Website/App Name)

Jan 6, 2023

Implement this is layout/default.vue for page title like

  • APP_NAME
  • Hello - APP_NAME
<script setup>const config = useRuntimeConfig()useHead({  titleTemplate: (titleChunk) => {    if (config.appName == titleChunk) return titleChunk    return titleChunk ? `${titleChunk} - ${config.appName}` : config.appName;  }})</script>

For pages, just implement useHead with title. The following will generate title like Hello - APP_NAME

<script setup>useHead({  title: 'Hello'})</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.