Azene Posts - Answer Overflow

Azene

•Created by Azene on 6/24/2024 in #❓・help

Async Data and useSeoMeta

Hi, I am currently using Nuxt 3 on my website and I use useSeoMeta to change my meta datas. When I load my page, the wrong meta data shows up until my request to my API finishes, and when I send a link of a user's page it doesn't display any of the values I got from my API. Here is my code:

<script lang="ts">
import { httpsCallable } from 'firebase/functions'

export default {
  async setup () {
    const { $fireFunctions } = useNuxtApp()
    const { normalizedUser } = useNormalizer()
    const route = useRoute()
    const slug = ref(route.params.id)

    const { data: player, pending: pendingPlayer } = await useLazyAsyncData('route', async () => {
      const getFirePlayer = httpsCallable($fireFunctions as any, 'route')
      const res: any = await getFirePlayer({ username: slug.value })
      useSeoMeta({
        title: () => `${res.data?.data?.userData?.username ? 'NEEFT - Profil de ' + res.data?.data?.userData?.username : 'NEEFT - Profil de joueur'}`,
        description: () => res.data?.data?.userData?.ambition?.substring(0, 160) || '',
        ogTitle: () => `${res.data?.data?.userData?.username ? 'NEEFT - Profil de ' + res.data?.data?.userData?.username : 'NEEFT - Profil de joueur'}`,
        ogImage: () => res.data?.data?.userData?.customization?.avatarUrl,
        ogDescription: () => res.data?.data?.userData?.ambition?.substring(0, 160) || '',
        ogUrl: () => `https://www.neeft.fr${route.path}`,
        twitterTitle: () => `${res.data?.data?.userData?.username ? 'NEEFT - Profil de ' + res.data?.data?.userData?.username : 'NEEFT - Profil de joueur'}`,
        twitterDescription: () => res.data?.data?.userData?.ambition?.substring(0, 160) || '',
        twitterImage: () => res.data?.data?.userData?.customization?.avatarUrl,
        twitterCard: () => 'summary'
      })
      return normalizedUser(res.data.data)
    }, {
      server: false,
      watch: [slug]
    })

    return {
      pendingPlayer,
      player
    }
  }
}
</script>

<script lang="ts">
import { httpsCallable } from 'firebase/functions'

export default {
  async setup () {
    const { $fireFunctions } = useNuxtApp()
    const { normalizedUser } = useNormalizer()
    const route = useRoute()
    const slug = ref(route.params.id)

    const { data: player, pending: pendingPlayer } = await useLazyAsyncData('route', async () => {
      const getFirePlayer = httpsCallable($fireFunctions as any, 'route')
      const res: any = await getFirePlayer({ username: slug.value })
      useSeoMeta({
        title: () => `${res.data?.data?.userData?.username ? 'NEEFT - Profil de ' + res.data?.data?.userData?.username : 'NEEFT - Profil de joueur'}`,
        description: () => res.data?.data?.userData?.ambition?.substring(0, 160) || '',
        ogTitle: () => `${res.data?.data?.userData?.username ? 'NEEFT - Profil de ' + res.data?.data?.userData?.username : 'NEEFT - Profil de joueur'}`,
        ogImage: () => res.data?.data?.userData?.customization?.avatarUrl,
        ogDescription: () => res.data?.data?.userData?.ambition?.substring(0, 160) || '',
        ogUrl: () => `https://www.neeft.fr${route.path}`,
        twitterTitle: () => `${res.data?.data?.userData?.username ? 'NEEFT - Profil de ' + res.data?.data?.userData?.username : 'NEEFT - Profil de joueur'}`,
        twitterDescription: () => res.data?.data?.userData?.ambition?.substring(0, 160) || '',
        twitterImage: () => res.data?.data?.userData?.customization?.avatarUrl,
        twitterCard: () => 'summary'
      })
      return normalizedUser(res.data.data)
    }, {
      server: false,
      watch: [slug]
    })

    return {
      pendingPlayer,
      player
    }
  }
}
</script>

17 replies

Gaming

Programming