Moved features management in a separate component

src/components/home/featuresDisplay.vue

@@ -0,0 +1,44 @@
+<template>
+  <feature v-for="(e,i) in features" 
+      :key="i"
+      :title="e.title"
+      :desc="e.desc"
+      :button-text="e.buttonText"
+      :link="e.link"
+      :picture="e.picture"
+      :side="i%2==0"
+    />
+</template>
+
+<script setup>
+    import feature from './feature.vue';
+
+    import {useI18n} from 'vue-i18n';
+    const i18n = useI18n();
+
+    import projectsSvg from '@/assets/svg/projets.svg';
+
+    const features = [{
+        title: i18n.t("home.features.projects.title"),
+        desc: i18n.t("home.features.projects.desc"),
+        buttonText: i18n.t("home.features.projects.buttonText"),
+        picture: projectsSvg,
+        link: "#"
+    },{
+        title:"Hello World !",
+        desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis \
+                lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id \
+                porttitor erat, vitae dapibus velit. Praesent id felis tincidunt, \
+                efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt, \
+                suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor. \
+                Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam. \
+                Aenean faucibus neque id nibh facilisis auctor. ",
+        buttonText: "Click me !",
+        picture: "https://picsum.photos/600/400",
+        link: "#"
+    }];
+</script>
+
+<style scoped>
+
+</style>

src/views/HomeView.vue

@@ -2,34 +2,12 @@
   import welcome from '@/components/home/welcome.vue';
   import intersection from '@/components/home/intersection.vue';
   import presentation from '@/components/home/presentation.vue';
-  import feature from '@/components/home/feature.vue';
   import projects from '@/components/home/projects.vue';
+  import featuresDisplay from '@/components/home/featuresDisplay.vue';
 
   import {useI18n} from 'vue-i18n';
   const i18n = useI18n();
 
-  import projectsSvg from '@/assets/svg/projets.svg';
-
-  const features = [{
-    title: i18n.t("home.features.projects.title"),
-    desc: i18n.t("home.features.projects.desc"),
-    buttonText: i18n.t("home.features.projects.buttonText"),
-    picture: projectsSvg,
-    link: "#"
-  },{
-    title:"Hello World !",
-    desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis \
-            lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id \
-            porttitor erat, vitae dapibus velit. Praesent id felis tincidunt, \
-            efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt, \
-            suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor. \
-            Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam. \
-            Aenean faucibus neque id nibh facilisis auctor. ",
-    buttonText: "Click me !",
-    picture: "https://picsum.photos/600/400",
-    link: "#"
-  }];
-
   const projects_info = [{
     picture:"https://picsum.photos/400/300",
     desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis lectus, feugiat in eros sit amet, \
@@ -38,7 +16,8 @@
     buttonLink:"#"
   }]
 </script>
-
+<!-- Want to config displayed text ? Have a look inside components !
+ You may also want to check assets/localization files -->
 <template>
 
     <welcome/>
@@ -47,15 +26,7 @@
 
     <presentation/>
 
-    <feature v-for="(e,i) in features" 
+    <featuresDisplay/>
-      :key="i"
-      :title="e.title"
-      :desc="e.desc"
-      :button-text="e.buttonText"
-      :link="e.link"
-      :picture="e.picture"
-      :side="i%2==0"
-    />
 
     <intersection style="margin-top: 20px;" text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#" />