Nuxt•11h ago

Nuxt2 displays wrong meta tags when the page is deleted

Hi everyone! Nuxt2 returns the meta data of the last searched for page when I try to send a page that was deleted, the behaviour is very weird and I have been debugging it all day but with no hope I have two main components one is the welcome component and this component does the fetching as in here

  async fetch() {
    this.userToken = this.$cookies.get('access_token');
    if (this.userToken === '') {
      this.userToken = null;
    }
    try {
      const response = await this.$rest.getPageComponets(encodeURIComponent(this.$route.params.username));
      this.pageTitle = pageTitle(response.data.data);
      ....
      await this.$store.dispatch('setProfile', profile);
    } catch (error) {
      const status = error.response?.status || 500;
      const message = error.response?.data?.error || 'Unexpected Error!';
      const formattedError = new Error(message);
      formattedError.statusCode = status;
      throw formattedError;
    }
  },

  async fetch() {
    this.userToken = this.$cookies.get('access_token');
    if (this.userToken === '') {
      this.userToken = null;
    }
    try {
      const response = await this.$rest.getPageComponets(encodeURIComponent(this.$route.params.username));
      this.pageTitle = pageTitle(response.data.data);
      ....
      await this.$store.dispatch('setProfile', profile);
    } catch (error) {
      const status = error.response?.status || 500;
      const message = error.response?.data?.error || 'Unexpected Error!';
      const formattedError = new Error(message);
      formattedError.statusCode = status;
      throw formattedError;
    }
  },

3 Replies

kapa.ai•11h ago

Hi @Alaa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain information specific to Nuxt 2's behavior regarding meta tags when a page is deleted or not found. The available documentation and examples focus on Nuxt 3's meta tag management, dynamic updates, and SSR/CSR handling, but do not address this particular issue in Nuxt 2. If you are experiencing meta tags from a previous page persisting after a page is deleted or not found, it may be related to how meta tags are managed or cached in Nuxt 2, but there is no explicit guidance or troubleshooting for this scenario in the sources above. For more accurate help, you may want to consult the official Nuxt 2 documentation or community forums. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11h ago

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

AlaaOP•11h ago

and I have the head component as this

 head() {
   // I do some operations here to push links properties

    if (!this.$store.state.profile) {
      return {
        title: this.pageTitle,
        link: links,
        meta: [],
      };
    }

    return {
      title: this.pageTitle,
      link: links,
      meta: [
        { hid: 'description', name: 'description', content: this.welcomeMessage },

        ...(this.isNoindex ? [{ name: 'robots', content: 'noindex, nofollow, nosnippet, noarchive' }] : []),

        // og tags
        { property: 'og:title', content: this.fullName, hid: 'og:title' },
        { property: 'og:url', content: this.userURL, hid: 'og:url' },
        { property: 'og:description', content: this.welcomeMessage, hid: 'og:description' },
        { property: 'og:author', content: this.fullName, hid: 'og:author' },
        { property: 'og:image', content: this.avatar, hid: 'og:image' },

        // twitter tags
        { name: 'twitter:title', content: this.fullName, hid: 'twitter:title' },
        { name: 'twitter:description', content: this.welcomeMessage, hid: 'twitter:description' },
        { name: 'twitter:card', content: 'summary', hid: 'twitter:card' },
        { name: 'twitter:creator', content: `@${this.twitter}`, hid: 'twitter:creator' },
        { name: 'twitter:url', content: this.userURL, hid: 'twitter:url' },
        { name: 'twitter:image', content: this.avatar, hid: 'twitter:image' },
      ],
    };
  },

 head() {
   // I do some operations here to push links properties

    if (!this.$store.state.profile) {
      return {
        title: this.pageTitle,
        link: links,
        meta: [],
      };
    }

    return {
      title: this.pageTitle,
      link: links,
      meta: [
        { hid: 'description', name: 'description', content: this.welcomeMessage },

        ...(this.isNoindex ? [{ name: 'robots', content: 'noindex, nofollow, nosnippet, noarchive' }] : []),

        // og tags
        { property: 'og:title', content: this.fullName, hid: 'og:title' },
        { property: 'og:url', content: this.userURL, hid: 'og:url' },
        { property: 'og:description', content: this.welcomeMessage, hid: 'og:description' },
        { property: 'og:author', content: this.fullName, hid: 'og:author' },
        { property: 'og:image', content: this.avatar, hid: 'og:image' },

        // twitter tags
        { name: 'twitter:title', content: this.fullName, hid: 'twitter:title' },
        { name: 'twitter:description', content: this.welcomeMessage, hid: 'twitter:description' },
        { name: 'twitter:card', content: 'summary', hid: 'twitter:card' },
        { name: 'twitter:creator', content: `@${this.twitter}`, hid: 'twitter:creator' },
        { name: 'twitter:url', content: this.userURL, hid: 'twitter:url' },
        { name: 'twitter:image', content: this.avatar, hid: 'twitter:image' },
      ],
    };
  },

And I also have this bit of code in my template

<client-only>
    <template v-if="$fetchState.pending">
      <div class="loading-spinner-box absolute top-0 left-0 right-0 bottom-0 backdrop-blur-sm z-10 flex justify-center">
        <img alt="App logo" src="@/assets/svg/logo-mark-spinner.svg" width="48" height="auto" />
      </div>
    </template>
    <template v-else-if="$fetchState.error">
      <error-component :error="$fetchState.error" />
    </template>

<client-only>
    <template v-if="$fetchState.pending">
      <div class="loading-spinner-box absolute top-0 left-0 right-0 bottom-0 backdrop-blur-sm z-10 flex justify-center">
        <img alt="App logo" src="@/assets/svg/logo-mark-spinner.svg" width="48" height="auto" />
      </div>
    </template>
    <template v-else-if="$fetchState.error">
      <error-component :error="$fetchState.error" />
    </template>

I have a feeling that the issue is with the <client-only> tag especially with my error component looking like this

<template>
  <client-only>
    <div class="layout-class error error-404 flex w-full p-8 mb-4">
      <div class="bg-white lg:bg-gray-10 rounded-xl w-full flex flex-col lg:flex-row-reverse items-center p-12" :dir="$store.state.dir">
        <div class="error-image min-w-[240px] w-1/2 py-4 lg:py-0">
          <svg-asset class="w-full" asset="error-404-en"></svg-asset>
        </div>

        <div class="error-body flex flex-col w-full lg:w-1/2 items-center lg:items-start space-y-4 py-4" :dir="$store.state.dir">
          <svg-asset v-if="$store.state.timeZone != 'Asia/Tehran'" asset="logo" class="error-body-logo w-24 min-w-24"></svg-asset>

          <h3 class="error-body-title text-lg font-bold">
            {{ $t('sorry, the page you are looking for does not exist!') }}
          </h3>

          <p v-if="$store.state.timeZone != 'Asia/Tehran'" class="error-body-description">
            {{ $t('but we suggest you register in for better coordination.') }}
          </p>

          <div v-if="$store.state.timeZone != 'Asia/Tehran'" class="flex lg:self-start">
            <a class="error-body-link z-btn bg-yellow hover:bg-orange-500 text-white" :href="siteUrl">
              {{ $t('view home page') }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </client-only>
</template>

<script>
import SvgAsset from '@/components/svg-asset';

export default {
  name: 'Error404',
  components: {
    SvgAsset,
  },
  computed: {
    siteUrl() {
      return `stuff here`;
    },
  },
  mounted() {
    this.$store.dispatch('setProfile', null);
  },
};
</script>

<style scoped lang="scss">
.error-404 {
  height: 100%;
}

@media only screen and (max-width: 768px) {
  .error-body {
    text-align: center;
  }
}
</style>

<template>
  <client-only>
    <div class="layout-class error error-404 flex w-full p-8 mb-4">
      <div class="bg-white lg:bg-gray-10 rounded-xl w-full flex flex-col lg:flex-row-reverse items-center p-12" :dir="$store.state.dir">
        <div class="error-image min-w-[240px] w-1/2 py-4 lg:py-0">
          <svg-asset class="w-full" asset="error-404-en"></svg-asset>
        </div>

        <div class="error-body flex flex-col w-full lg:w-1/2 items-center lg:items-start space-y-4 py-4" :dir="$store.state.dir">
          <svg-asset v-if="$store.state.timeZone != 'Asia/Tehran'" asset="logo" class="error-body-logo w-24 min-w-24"></svg-asset>

          <h3 class="error-body-title text-lg font-bold">
            {{ $t('sorry, the page you are looking for does not exist!') }}
          </h3>

          <p v-if="$store.state.timeZone != 'Asia/Tehran'" class="error-body-description">
            {{ $t('but we suggest you register in for better coordination.') }}
          </p>

          <div v-if="$store.state.timeZone != 'Asia/Tehran'" class="flex lg:self-start">
            <a class="error-body-link z-btn bg-yellow hover:bg-orange-500 text-white" :href="siteUrl">
              {{ $t('view home page') }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </client-only>
</template>

<script>
import SvgAsset from '@/components/svg-asset';

export default {
  name: 'Error404',
  components: {
    SvgAsset,
  },
  computed: {
    siteUrl() {
      return `stuff here`;
    },
  },
  mounted() {
    this.$store.dispatch('setProfile', null);
  },
};
</script>

<style scoped lang="scss">
.error-404 {
  height: 100%;
}

@media only screen and (max-width: 768px) {
  .error-body {
    text-align: center;
  }
}
</style>

To Summarize: I'm stuck on this Nuxt 2 issue: when a user visits a non-existent profile URL, I throw an error in the fetch() method. This correctly triggers my custom error component, but the meta tags in the <head> (like title, description, og tags) remain from the last successful page and do not update or clear. Here’s what I have: The page fetches profile data in async fetch() and sets up metadata in head(). If the fetch fails, I throw a formatted error which renders a custom <error-component />. This is all wrapped inside <client-only>, including the error component being wrapped inside it too. I'm suspicious that head() isn't being recalculated on error, or maybe client-only is preventing it somehow? Has anyone run into this before? What's the best way to force a proper head/meta reset when a page results in a 404 or fetch error? Thanks in advance 🙏

Gaming

Programming

Nuxt2 displays wrong meta tags when the page is deleted

Did you find this page helpful?