Nuxt•2y ago

Title change when I scroll

Hello, I've got problem with title using useHead. When I scroll into my page, the title changing to a another title of page.

7 Replies

Thomas BntOP•2y ago

My app.vue :

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
<script setup>
useHead({
  titleTemplate: (title) => {
    return title ? `${title} — Compagny` : "Compagny";
  }
});
useSeoMeta({
  ogType: "website",
  twitterCard: "summary_large_image"
});
</script>

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
<script setup>
useHead({
  titleTemplate: (title) => {
    return title ? `${title} — Compagny` : "Compagny";
  }
});
useSeoMeta({
  ogType: "website",
  twitterCard: "summary_large_image"
});
</script>

An example of page (each pages have useHead and useSeoMeta :

<script>
useSeoMeta({
  description: "Cool desc",
  canonical: "http://example.com",
});
useHead({
  title: "Secondary page",
  description: "Cool desc",
});
</script>

<script>
useSeoMeta({
  description: "Cool desc",
  canonical: "http://example.com",
});
useHead({
  title: "Secondary page",
  description: "Cool desc",
});
</script>

Under Nuxt 3.3.1 and without plugins. I have this issue when nuxi dev AND nuxi generate :c Issue always here :c

harlan•2y ago

Would it be possible to make a reproduction? The issue isn't very clear from what you've provided

Thomas BntOP•2y ago

Hello, I recreated the same website https://github.com/thomasbnt/reprod-err-nuxt3-seo-title The preview of this issue : ~~https://example-seo-unhead.netlify.app/~~ https://nuxt3-all-title-load-same-time.netlify.app/ (under Netlify)

GitHub

GitHub - thomasbnt/reprod-err-nuxt3-seo-title

Contribute to thomasbnt/reprod-err-nuxt3-seo-title development by creating an account on GitHub.

harlan•2y ago

But what's the issue? It's still not clear

Thomas BntOP•2y ago

Ooops wrong URL of the website. https://nuxt3-all-title-load-same-time.netlify.app/ I seen all pages load at the same time. https://i.thomasbnt.dev/i/y6amj.png My problem is : How I can have one title for one page without load all meta tags from others pages?

harlan•2y ago

This is very strange, haven't seen this before 🤔 I would say it's related to ssr: false ah right it's because useHead is a vue composable, it needs to run inside the setup() method or you need to use <script setup>

Thomas BntOP•2y ago

Owwwh thanks ! Tagged this thread resolved with answer

Gaming

Programming

Title change when I scroll