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:
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>
