use slugs in news page names

components/News/List.client.vue → components/News/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="pending">
+  <div v-if="rendering || pending">
     <v-row class="justify-center progress">
       <v-progress-circular indeterminate color="grey" />
     </v-row>
@@ -60,7 +60,7 @@
                       <div class="button-container">
                         <v-card-actions class="justify-end">
                           <v-btn
-                            :to="`/actualites/${newsItem.id}`"
+                            :to="`/actualites/${newsItem.id}-${newsItem.slug}`"
                             class="inv-theme btn mr-2 mb-1"
                           >
                             En savoir plus
@@ -96,6 +96,11 @@ import type { ComputedRef, Ref } from 'vue'
 import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import News from '~/models/Maestro/News'
 
+const rendering: Ref<boolean> = ref(true)
+onMounted(() => {
+  rendering.value = false
+})
+
 const config = useRuntimeConfig()
 const { fetchCollection } = useEntityFetch()
 

models/Maestro/News.ts

@@ -18,6 +18,9 @@ export default class News extends ApiModel {
   @Str(null)
   declare title: string | null
 
+  @Str(null)
+  declare slug: string | null
+
   @Str(null)
   declare leadText: string | null