[Nuxt 3] วิธีการทำ title template ให้คล้ายๆ WordPress

ถ้าใน WordPress มันจะมีการกำหนดประมาณว่า “WebName | KanexKane” อะไรแบบนี้เนอะ แต่ใน Nuxt ถ้าจะมากำหนดทีละหน้า มันดูไม่น่าใช่ เราก็จะมาทำให้มันกำหนดออกมาได้แบบนี้ เหมือนกำลังใช้ Yoast SEO กันอยู่เลย

// file: nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      title: '',
      titleTemplate: '%s %separator %siteName'
      templateParams: {
        siteName: 'KanexKane',
        separator: '|',
      }
    }
  }
});

เท่านี้เราก็จะได้ title template ที่เราต้องการละ แล้วถ้าต้องการเพิ่มพวก meta description เข้าไปอีกก็เพิ่มไปแบบนี้

// file: nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      title: '',
      titleTemplate: '%s %separator %siteName'
      templateParams: {
        siteName: 'KanexKane',
        separator: '|',
      }
      meta: [
        { name: 'description', content: 'สอนทำ title template และเพิ่ม meta description' },
      ],
    }
  }
});

วิธีใช้แบบหน้าเดียว

// pages/index.vue

<script setup>
  useHead({
    title: 'หน้าแรก',
  });
</script>

<template>
  INDEX
</template>

วิธีใช้แบบทุกหน้าด้วย Middleware

// pages/index.vue

<script setup>
  definePageMeta({
    title: 'หน้าแรก',
  });
</script>

<template>
  INDEX
</template>

// middleware/head.global.js

export default defineNuxtMiddleware((to, from) => {
  useHead({
    title: to.meta.title,
  });
});

สร้างไฟล์ head.global.js การสร้างไฟล์ที่ .global ใน middleware แปลว่ามันจะถูกเรียกใช้ทุกครั้งอัตโนมัติทุกหน้าเลย ในกรณีที่ทำอย่างนี้คือบางทีการกำหนดแต่ละหน้า มันไม่ได้กำหนดแค่ title อย่างเดียว จะมีการกำหนด Layout ด้วย แบบนี้

// pages/index.vue

<script setup>
  definePageMeta({
    layout: 'admin',
  });

  useHead({
    title: 'หน้าแรก',
  });
</script>

<template>
  INDEX
</template>

การเขียน defindPageMeta กับ useHead เลยดูโค้ดยุ่งยากขึ้นนิดนึง เลยทำการรวบแบบนี้จะดูง่ายกว่า

// pages/index.vue

<script setup>
  definePageMeta({
    layout: 'admin',
    title: 'หน้าแรก',
  });
</script>

<template>
  INDEX
</template>

// middleware/head.global.js

export default defineNuxtMiddleware((to, from) => {
  useHead({
    title: to.meta.title,
  });
});