Nuxt•6mo ago

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>

13 Replies

Inès•6mo ago

Hi, probably due to the use of "useLazyAsyncData". Have you tried replacing it with a simple "useAsyncData"?

AzeneOP•6mo ago

Just tried it but it didn't change a thing :/

Inès•6mo ago

Oh.. on my side I use "useAsyncData" to directly fetch my data and then I store it with pinia. And to inject metadata I use "useSeoMeta" with data directly from the store. I wonder if there is a change in timing/lifecycle wrt. options api (that you use) and composition api (that I use on my side). That would be smth like: <script lang="ts" setup> useSeoMeta({ myStore().title, ogTitle: myStore().title, myStore().description, ogDescription: myStore().description, }) useAsyncData('route', () => myStore().fetchMyData()) </script>

AzeneOP•6mo ago

Well if I'm not wrong I am using composition api, maybe it's because your using a local store

Inès•6mo ago

And if you switch to script setup instead of using the setup method?

AzeneOP•6mo ago

Nope doesn't change a thing either

manniL•6mo ago

you shouldn't use it inside useAsyncdata/useLazyAsyncData instead, use useSeoMeta outside of the function and utilize the data retrieved from it

AzeneOP•6mo ago

I changed it earlier but it doesn't work, except if it wasn't what you meant:

<script lang="ts" setup>
import { httpsCallable } from 'firebase/functions'
const { $fireFunctions } = useNuxtApp()
const { normalizedUser } = useNormalizer()
const route = useRoute()
const slug = ref(route.params.id)

const { data: player, pending: pendingPlayer } = await useAsyncData('player', async () => {
  const getFirePlayer = httpsCallable($fireFunctions as any, 'getUser')
  const res: any = await getFirePlayer({ username: slug.value })
  return normalizedUser(res.data.data)
}, {
  server: false,
  watch: [slug]
})

useSeoMeta({
  title: () => `${player.value?.userData?.username ? 'NEEFT - Profil de ' + player.value?.userData?.username : 'NEEFT - Profil de joueur'}`,
  description: () => player.value?.userData?.ambition?.substring(0, 160) || '',
  ogTitle: () => `${player.value?.userData?.username ? 'NEEFT - Profil de ' + player.value?.userData?.username : 'NEEFT - Profil de joueur'}`,
  ogImage: () => player.value?.userData?.customization?.avatarUrl,
  ogDescription: () => player.value?.userData?.ambition?.substring(0, 160) || '',
  ogUrl: () => `https://www.neeft.fr${route.path}`,
  twitterTitle: () => `${player.value?.userData?.username ? 'NEEFT - Profil de ' + player.value?.userData?.username : 'NEEFT - Profil de joueur'}`,
  twitterDescription: () => player.value?.userData?.ambition?.substring(0, 160) || '',
  twitterImage: () => player.value?.userData?.customization?.avatarUrl,
  twitterCard: () => 'summary'
})

</script>

<script lang="ts" setup>
import { httpsCallable } from 'firebase/functions'
const { $fireFunctions } = useNuxtApp()
const { normalizedUser } = useNormalizer()
const route = useRoute()
const slug = ref(route.params.id)

const { data: player, pending: pendingPlayer } = await useAsyncData('player', async () => {
  const getFirePlayer = httpsCallable($fireFunctions as any, 'getUser')
  const res: any = await getFirePlayer({ username: slug.value })
  return normalizedUser(res.data.data)
}, {
  server: false,
  watch: [slug]
})

useSeoMeta({
  title: () => `${player.value?.userData?.username ? 'NEEFT - Profil de ' + player.value?.userData?.username : 'NEEFT - Profil de joueur'}`,
  description: () => player.value?.userData?.ambition?.substring(0, 160) || '',
  ogTitle: () => `${player.value?.userData?.username ? 'NEEFT - Profil de ' + player.value?.userData?.username : 'NEEFT - Profil de joueur'}`,
  ogImage: () => player.value?.userData?.customization?.avatarUrl,
  ogDescription: () => player.value?.userData?.ambition?.substring(0, 160) || '',
  ogUrl: () => `https://www.neeft.fr${route.path}`,
  twitterTitle: () => `${player.value?.userData?.username ? 'NEEFT - Profil de ' + player.value?.userData?.username : 'NEEFT - Profil de joueur'}`,
  twitterDescription: () => player.value?.userData?.ambition?.substring(0, 160) || '',
  twitterImage: () => player.value?.userData?.customization?.avatarUrl,
  twitterCard: () => 'summary'
})

</script>

manniL•6mo ago

now you shouldn't just call it "route" but actually add a slug or param id or similar to the key ☺️

AzeneOP•6mo ago

Even with that change it doesn't work, this thing is driving me crazy

manniL•6mo ago

well you have server: false so of course it won't have any info on the server 🙂

AzeneOP•6mo ago

THe thing is that I do get infos from my server, but when I send a link like this: https://www.neeft.fr/joueurs/C0unt

NEEFT - Profil de joueur

AzeneOP•6mo ago

It doesn't display the name or the description of the user

Gaming

Programming

Async Data and useSeoMeta