Working

settings/Build.ts

@@ -1,6 +1,8 @@
 // Build Configuration: https://go.nuxtjs.dev/config-build
 export default {
   babel: {
-    plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
+    plugins: [
+      ['@babel/plugin-proposal-private-methods', { loose: true }]
+    ],
   },
 }

src/components/About.vue

@@ -2,7 +2,7 @@
   <section v-if="age" class="w-full flex items-center justify-center my-12">
     <div class="flex flex-col md:flex-row justify-between items-center">
       <div class="mb-12 md:mb-0 w-full md:w-1/2 flex justify-center">
-        <img src="~/assets/images/memojies/Hat.png" alt="It's me !" class="xl:w-1/2" />
+        <img src="@/assets/images/memojies/Hat.png" alt="It's me !" class="xl:w-1/2" />
       </div>
       <div class="md:w-1/2 text-justify">
         <h2 class="text-4xl font-bold text-center md:text-justify">
@@ -12,7 +12,7 @@
           {{ $t('home.about.description', {age: age}) }}
         </p>
         <div class="flex justify-center md:justify-start">
-          <Button content="home.about.about" link="about"/>
+          <Button content="home.about.about" link="about" />
         </div>
       </div>
     </div>
@@ -23,9 +23,10 @@
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 
 export default defineComponent({
-  name: "AboutHome",
+  name: "About",
   setup() {
     const {$axios, $sentry, app} = useContext()
+
     const age = useAsync(async () => {
       const response = await $axios.get('/api/informations', {
         headers: {

src/components/Announce.vue

@@ -17,10 +17,10 @@
 </template>
 
 <script lang="ts">
-import {computed, useAsync, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 
-export default {
+export default defineComponent({
-  name: "Announcement",
+  name: "Announce",
   setup() {
     const {$axios, $sentry, app} = useContext()
 
@@ -60,5 +60,5 @@ export default {
       getHoverColor,
     }
   }
-}
+})
 </script>

src/components/PresentationAbout.vue

@@ -15,6 +15,6 @@
 
 <script>
 export default {
-  name: "SkillsAbout"
+  name: "PresentationAbout"
 }
 </script>

src/layouts/default.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import {computed, onMounted, ref, useRouter, useStore} from "@nuxtjs/composition-api";
+import {computed, useRouter, useStore} from "@nuxtjs/composition-api";
 import {State} from "~/types/types";
 
 export default {

src/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="flex flex-col items-center mb-8 px-4 xl:px-32">
     <Banner />
-    <AboutHome />
+    <About />
     <PostsHome />
     <ProjectsHome />
     <AdHome />