test to setup meta tags before rendering

.eslintrc.cjs

@@ -55,6 +55,7 @@ module.exports = {
     Ref: 'readonly',
     watch: 'readonly',
     useGtag: 'readonly',
-    defineEmits: 'readonly'
+    defineEmits: 'readonly',
+    useAsyncData: 'readonly',
   },
 }

components/News/Details.client.vue

@@ -14,13 +14,13 @@
         </v-col>
       </v-row>
 
-      <div>
+      <div v-if="newsItem">
         <div class="news">
-          <CommonMeta
-            :title="() => newsItem.title!"
-            :description="() => newsItem.leadText!"
-            :image="() => getImageUrl(newsItem.attachment)"
-          />
+          <!--          <CommonMeta-->
+          <!--            :title="() => newsItem.title!"-->
+          <!--            :description="() => newsItem.leadText!"-->
+          <!--            :image="() => getImageUrl(newsItem.attachment)"-->
+          <!--          />-->
 
           <v-row class="center-90 mb-12">
             <v-col cols="12" md="6">
@@ -95,12 +95,13 @@ import { parseISO, format } from 'date-fns'
 import { fr } from 'date-fns/locale'
 import type { ComputedRef } from 'vue'
 import News from '~/models/Maestro/News'
+import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import { useEntityManager } from '~/composables/data/useEntityManager'
 
 const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute()
-const { em } = useEntityManager()
+// const { fetch } = useEntityFetch()
 const config = useRuntimeConfig()
 
 const newsId: number = parseInt(route.params.id as string)
@@ -109,7 +110,15 @@ if (!newsId || isNaN(newsId)) {
 }
 
 // @ts-expect-error Until we can fix the typing of fetch
-const newsItem: Ref<News> = ref(await em.fetch(News, newsId))
+// const { data: newsItem } = (await fetch(News, newsId)) as Ref<News>
+
+const { em } = useEntityManager()
+
+const { data: newsItem } = await useAsyncData(
+  'news_' + newsId,
+  async () => await em.fetch(News, newsId, true),
+  { lazy: false }
+)
 
 const getImageUrl = (attachment: string | null): string | null => {
   if (!attachment) {
@@ -136,6 +145,26 @@ const formattedPublicationDate: ComputedRef<string> = computed(() => {
 
   return formattedPublicationDate
 })
+
+watch(newsItem, () => {
+  if (!newsItem.value) {
+    return
+  }
+  console.log('seo on')
+  useSeoMeta({
+    title: newsItem.value.title!,
+    ogTitle: newsItem.value.title!,
+    twitterTitle: newsItem.value.title!,
+    description: newsItem.value.leadText!,
+    ogDescription: newsItem.value.leadText!,
+    twitterDescription: newsItem.value.leadText!,
+    ogImage: () => getImageUrl(newsItem.value.attachment),
+    twitterImage: () => getImageUrl(newsItem.value.attachment),
+    twitterCard: 'summary_large_image',
+    ogType: 'website',
+    ogLocale: 'fr_FR',
+  })
+})
 </script>
 
 <style scoped>

pages/actualites/[id]-[slug].vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <CommonMeta
-      title="Actualité de l'éditeur de logiciel de gestion et de communication Opentalent"
-      description="Suivez l’actualité d’Opentalent : événements incontournables, opportunité de carrières et innovations logicielles. Suivez-nous et faites partie de l'évolution culturelle."
-    />
+    <!--    <CommonMeta-->
+    <!--      title="Actualité de l'éditeur de logiciel de gestion et de communication Opentalent"-->
+    <!--      description="Suivez l’actualité d’Opentalent : événements incontournables, opportunité de carrières et innovations logicielles. Suivez-nous et faites partie de l'évolution culturelle."-->
+    <!--    />-->
 
     <LayoutUITitlePage>
       Actualités