Nuxt•5w ago

How to change the title of page dynamically

Something like this.

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>

useSeoMeta({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => {
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>

useSeoMeta({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => {
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

6 Replies

kapa.ai•5w ago

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the title of a page dynamically in Nuxt, you can use the useHead composable or the useSeoMeta composable. Based on your code snippet, it seems you're already using useSeoMeta, which is a good choice for managing SEO-related metadata. Here's how you can modify your code to change the title dynamically:

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
const title = ref('Default Title')

useSeoMeta({
  title,
  titleTemplate: (pageTitle) => {
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
})

// You can update the title dynamically like this:
// title.value = 'New Page Title'
</script>

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
const title = ref('Default Title')

useSeoMeta({
  title,
  titleTemplate: (pageTitle) => {
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
})

// You can update the title dynamically like this:
// title.value = 'New Page Title'
</script>

In this setup: 1. We create a reactive title ref that will hold the current page title. 2. We pass this title ref to the useSeoMeta composable. 3. The titleTemplate function remains the same, allowing you to append a site name to your page titles. To change the title dynamically, you can simply update the title ref:

title.value = 'New Page Title'

title.value = 'New Page Title'

This approach allows for reactive updates to the page title. Whenever title.value changes, the page title will be updated automatically. If you need to update the title based on route changes or other dynamic factors, you can do so within a watch or onMounted hook, or in response to user actions. For example, to update the title based on the current route, you could do:

const route = useRoute()

watch(() => route.path, (newPath) => {
  // Update title based on the new path
  title.value = `Page for ${newPath}`
})

const route = useRoute()

watch(() => route.path, (newPath) => {
  // Update title based on the new path
  title.value = `Page for ${newPath}`
})

This setup provides a flexible way to manage your page titles dynamically while maintaining a consistent structure across your site. Nuxt SEO Meta Documentation (https://nuxt.com/docs/getting-started/seo-meta#useseometa) Nuxt useHead Documentation (https://nuxt.com/docs/getting-started/seo-meta#usehead) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Adnan ErlansyahOP•5w ago

@kapa.ai I've already did something like this. - Login Page:

<template>
    <div>
        Login Page
    </div>
</template>

<script setup>

definePageMeta({
  title: 'Login Page'
})

</script>

<style scoped>

</style>

<template>
    <div>
        Login Page
    </div>
</template>

<script setup>

definePageMeta({
  title: 'Login Page'
})

</script>

<style scoped>

</style>

- App.vue

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>

useHead({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => {
    console.log(pageTitle)
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>

useHead({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => {
    console.log(pageTitle)
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

but the title of login page is still 'KOMARA Site'

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing more context about your implementation. I understand you're trying to set a dynamic title for your login page, but it's not working as expected. Let's address this issue. The problem here is that definePageMeta doesn't directly set the page title in a way that useHead in app.vue can detect. Instead, we need to use useHead in the page component itself to set the title. Here's how you can modify your Login Page to make it work: 1. Modify your Login Page like this:

<template>
    <div>
        Login Page
    </div>
</template>

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

<style scoped>
</style>

<template>
    <div>
        Login Page
    </div>
</template>

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

<style scoped>
</style>

2. Keep your app.vue as it is:

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
useHead({
  titleTemplate: (pageTitle) => {
    console.log(pageTitle)
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
})
</script>

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
useHead({
  titleTemplate: (pageTitle) => {
    console.log(pageTitle)
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
})
</script>

This setup should work because: 1. The useHead in the Login Page sets the title to "Login Page". 2. The useHead in app.vue with titleTemplate will then append "- KOMARA GO Site" to the title set in the page component. The result should be "Login Page - KOMARA GO Site" as the full page title. This approach is recommended in the Nuxt documentation for setting page-specific titles while maintaining a consistent structure across your site Nuxt SEO Meta Documentation (https://nuxt.com/docs/getting-started/seo-meta#examples). If you need to use definePageMeta for other purposes, you can still keep it in your page component, but it won't affect the page title directly. For title management, stick with useHead as shown above. Remember, useHead is reactive, so you can also use refs or computed properties if you need to change the title dynamically within the page component Nuxt useHead Documentation (https://nuxt.com/docs/api/composables/use-head#type). If you're still experiencing issues after making these changes, please let me know, and we can troubleshoot further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

harlan•5w ago

see https://nuxtseo.com/learn/mastering-meta/titles

Nuxt SEO

Nuxt SEO - All the boring SEO work for Nuxt done.

Learn how to master page titles in Vue & Nuxt using useHead, title templates, and SEO best practices. Includes reactive titles, social sharing, and template params.

Gaming

Programming

How to change the title of page dynamically