Optimize seo for individual projects

Author: zooldeveloper

components/Project.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-    import { useRoute } from 'vue-router';
+    import { useSetMetaData } from '~/composables/onPageMetaData';
+    import { Project } from '../types'
     
-    const { locale } = useI18n();
-
-    const route = useRoute();
-    const { id } = route.params;
-
-    const { data: project } = await useFetch(() => `/api/projects?id=${id}`);
-    if (!project.value) {
-        throw createError({ statusCode: 404, fatal: true})
-    }
+    const { locale, t } = useI18n();
 
+    const props = defineProps<{
+        project: Project
+    }>();
+    
+    watch(props.project, () : void => {
+        useSetMetaData(props.project.title, props.project.briefDescription);
+    }, { immediate: true, deep: true});
+    
 
     const toolTitle = ref('');
 
@@ -25,13 +26,7 @@
             default :
         }
     }
-
-    // Try to find a better solution!
-    watch(() => route.name, (newValue, oldValue) => {
-        if(newValue === 'index' && oldValue !== 'index') {
-            location.reload();
-        }
-    });
+  
 
 </script>
 

data/db.ts

@@ -31,7 +31,7 @@ const zoolDeveloper = 'https://www.figma.com/file/5Ndy1AFfl9WDCWYOsNxFDE/MyPortf
 export  default [
         {
         id: 1,
-        title: 'réservia',
+        title: 'Réservia',
         type: 'portfolio.project1.type',
         briefDescription: 'portfolio.project1.brief_description',
         mainDescription: "portfolio.project1.main_description",
@@ -51,7 +51,7 @@ export  default [
     },
     {
         id: 2,
-        title: 'ohmyfood',
+        title: 'Ohmyfood',
         type: 'portfolio.project2.type',
         briefDescription: 'portfolio.project2.brief_description',
         mainDescription: 'portfolio.project2.main_description',
@@ -72,7 +72,7 @@ export  default [
     },
     {
         id: 3,
-        title: 'la chouette agence',
+        title: 'La chouette agence',
         type: 'portfolio.project3.type',
         briefDescription: 'portfolio.project3.brief_description',
         mainDescription: 'portfolio.project3.main_description',
@@ -94,7 +94,7 @@ export  default [
     },
     {
         id: 4,
-        title: 'orinoco',
+        title: 'Orinoco',
         type: 'portfolio.project4.type',
         briefDescription: 'portfolio.project4.brief_description',
         mainDescription: 'portfolio.project4.main_description',
@@ -117,7 +117,7 @@ export  default [
     },
     {
         id: 5,
-        title: 'hot takes',
+        title: 'Hot Takes',
         type: 'portfolio.project5.type',
         briefDescription: 'portfolio.project5.brief_description',
         mainDescription: 'portfolio.project5.main_description',
@@ -138,7 +138,7 @@ export  default [
     },
     {
         id: 6,
-        title: 'groupomania',
+        title: 'Groupomania',
         type: 'portfolio.project6.type',
         briefDescription: 'portfolio.project6.brief_description',
         mainDescription: 'portfolio.project6.main_description',
@@ -161,7 +161,7 @@ export  default [
     },
     {
         id: 7,
-        title: 'task tracker',
+        title: 'Task Tracker',
         type: 'portfolio.project7.type',
         briefDescription: 'portfolio.project7.brief_description',
         mainDescription: 'portfolio.project7.main_description',
@@ -181,7 +181,7 @@ export  default [
     },
     {
         id: 8,
-        title: 'the jungle house',
+        title: 'The Jungle House',
         type: 'portfolio.project8.type',
         briefDescription: 'portfolio.project8.brief_description',
         mainDescription: 'portfolio.project8.main_description',
@@ -201,7 +201,7 @@ export  default [
     },
     {
         id: 9,
-        title: 'weather app',
+        title: 'Weather App',
         type: 'portfolio.project9.type',
         briefDescription: 'portfolio.project9.brief_description',
         mainDescription: 'portfolio.project9.main_description',
@@ -221,7 +221,7 @@ export  default [
     },
     {
         id: 10,
-        title: 'tenzies game',
+        title: 'Tenzies Game',
         type: 'portfolio.project10.type',
         briefDescription: 'portfolio.project10.brief_description',
         mainDescription: 'portfolio.project10.main_description',
@@ -241,7 +241,7 @@ export  default [
     },
     {
         id: 11,
-        title: 'mp house location',
+        title: 'MP House Location',
         type: 'portfolio.project11.type',
         briefDescription: 'portfolio.project11.brief_description',
         mainDescription: 'portfolio.project11.main_description',
@@ -263,7 +263,7 @@ export  default [
     },
     {
         id: 12,
-        title: 'zool developer',
+        title: 'Zool Developer',
         type: 'portfolio.project12.type',
         briefDescription: 'portfolio.project12.brief_description',
         mainDescription: 'portfolio.project12.main_description',

locales/ar.json

@@ -29,10 +29,6 @@
     "tools_alt_desc": "أيقونة",
     "download_resume": "تحميل السيرة الذاتية ",
     "portfolio": {
-        "meta": {
-            "page_title": "معلومات المشروع",
-            "page_description": "ستجد هنا معلومات مفصلة عن كل مشروع"
-        },
         "heading": {
             "main": "أعمالي",
             "navigational_title": "مشاريع الويب | التصاميم",

locales/en.json

@@ -29,10 +29,6 @@
     "tools_alt_desc": "icon",
     "download_resume": "Download my resume",
     "portfolio": {
-        "meta": {
-            "page_title": "Project information",
-            "page_description": "Here you will find detailed information about each project"
-        },
         "heading": {
             "main": "Portfolio",
             "navigational_title": "Web Projects | Designs",

locales/fr.json

@@ -29,10 +29,6 @@
         "tools_alt_desc": "îcone",
     "download_resume": "Télécharger mon CV",
     "portfolio": {
-        "meta": {
-            "page_title": "Informations du projet",
-            "page_description": "Vous trouverez ici les informations de chaque projet de manière détaillé"
-        },
         "heading": {
             "main": "Portfolio",
             "navigational_title": "Projets web | Designs",

pages/projects/[id].vue

@@ -1,17 +1,28 @@
 <script setup lang="ts">
-    import { useSetMetaData } from '~/composables/onPageMetaData';
+    import { useRoute } from 'vue-router';
     
     const { locale, t } = useI18n();
 
-    onMounted(() => {
-        useSetMetaData('portfolio.meta.page_title', 'portfolio.meta.page_description')
+    const route = useRoute();
+    const { id } = route.params;
+
+    const { data: project } = await useFetch(() => `/api/projects?id=${id}`);
+    if (!project.value) {
+        throw createError({ statusCode: 404, fatal: true})
+    }
+   
+    // Try to find a better solution!
+    watch(() => route.name, (newValue, oldValue): void => {
+        if(newValue === 'index' && oldValue !== 'index') {
+            location.reload();
+        }
     });
 
 </script>
 
 <template>
     <main :class="{'lang-ar': locale === 'ar'}">
-        <Project />
+        <Project :project="project" />
     </main>
 </template>