Fixing the invisibles posts

src/components/AboutHome.vue

@@ -20,10 +20,10 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 import {InfoData} from "../../@types/types";
 
-export default {
+export default defineComponent({
   name: "AboutPreview",
   setup() {
     const {$content} = useContext()
@@ -35,5 +35,5 @@ export default {
       info
     }
   }
-}
+})
 </script>

src/components/Ad.vue

@@ -5,13 +5,13 @@
 </template>
 
 <script lang="ts">
-import {computed} from "@nuxtjs/composition-api";
+import {computed, defineComponent} from "@nuxtjs/composition-api";
 
 interface AdProps {
   color: string
 }
 
-export default {
+export default defineComponent({
   name: "Ad",
   props: {
     color: {
@@ -35,5 +35,5 @@ export default {
       getColor
     }
   }
-}
+})
 </script>

src/components/Button.vue

@@ -21,6 +21,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-</style>

src/components/ContactForm.vue

@@ -67,10 +67,10 @@
 </template>
 
 <script lang="ts">
-import {computed, ref, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, ref, useContext} from "@nuxtjs/composition-api";
 import {Form} from "../../@types/types";
 
-export default {
+export default defineComponent({
   name: "ContactForm",
   setup() {
     const error = ref(false)
@@ -121,7 +121,7 @@ export default {
       handleForm
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/Experience.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import {computed, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
 
 interface ExperienceProps {
   title: string,
@@ -26,7 +26,7 @@ interface ExperienceProps {
   end: string
 }
 
-export default {
+export default defineComponent({
   name: "Experience",
   props: {
     title: {
@@ -71,7 +71,7 @@ export default {
       isSameDate
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/ExperiencesAbout.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 import {Experience} from "../../@types/types";
 
-export default {
+export default defineComponent({
   name: "ExperiencesAbout",
   setup() {
     const {$content} = useContext()
@@ -36,7 +36,7 @@ export default {
       experiences
     }
   }
-}
+})
 </script>
 
 <style scoped>

src/components/Footer.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script>
-import {computed, ref, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, ref, useContext} from "@nuxtjs/composition-api";
 
-export default {
+export default defineComponent({
   name: "Footer",
   setup() {
     const {$colorMode} = useContext()
@@ -64,7 +64,7 @@ export default {
       isDarkMode
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/Formation.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import {computed, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
 
 interface FormationProps {
   title: string,
@@ -25,7 +25,7 @@ interface FormationProps {
   end: string
 }
 
-export default {
+export default defineComponent({
   name: "Formation",
   props: {
     title: {
@@ -65,7 +65,7 @@ export default {
       getEndDate
     }
   }
-}
+})
 </script>
 
 <style scoped>

src/components/FormationsAbout.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 import {Formation} from "../../@types/types";
 
-export default {
+export default defineComponent({
   name: "FormationsHome",
   setup() {
     const {$content} = useContext()
@@ -36,7 +36,7 @@ export default {
       formations
     }
   }
-}
+})
 </script>
 
 <style scoped>

src/components/Header.vue

@@ -107,9 +107,9 @@
 </template>
 
 <script lang="ts">
-import {onMounted, onUnmounted, ref, useAsync, useContext, useRouter} from "@nuxtjs/composition-api";
+import {defineComponent, onMounted, onUnmounted, ref, useAsync, useContext, useRouter} from "@nuxtjs/composition-api";
 
-export default {
+export default defineComponent({
   name: "Header",
   setup() {
     const {$colorMode} = useContext()
@@ -146,7 +146,7 @@ export default {
       changeLanguage
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/Post.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import {computed, useContext} from "@nuxtjs/composition-api";
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
 
 interface PostProps {
   title: string,
@@ -36,7 +36,7 @@ interface PostProps {
   reading_time: number
 }
 
-export default {
+export default defineComponent({
   name: "Post",
   props: {
     title: {
@@ -82,7 +82,7 @@ export default {
       formatDate
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/PostsHome.vue

@@ -30,29 +30,14 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
-import {Post} from "../../@types/types";
+import {defineComponent} from "@nuxtjs/composition-api";
 
-export default {
+export default defineComponent({
   name: "PostsHome",
-  setup() {
-    const { $content, i18n } = useContext()
-
-    const posts = useAsync(() => {
-      return $content(`articles/${i18n.locale}`)
-        .sortBy('date', 'asc')
-        .limit(3)
-        .fetch<Post>()
-    })
-
-    const debug = () => {
-      console.log(posts)
-    }
-
-    return {
-      posts,
-      debug
+  props: {
+    posts: {
+      default: () => [],
     }
   }
-}
+})
 </script>

src/components/Project.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import {computed} from "@nuxtjs/composition-api";
+import {computed, defineComponent} from "@nuxtjs/composition-api";
 
 interface ProjectProp {
   title: string,
@@ -30,7 +30,7 @@ interface ProjectProp {
   url: string,
 }
 
-export default {
+export default defineComponent({
   name: "Project",
   props: {
     title: {
@@ -61,7 +61,7 @@ export default {
       getCover
     }
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/ProjectsHome.vue

@@ -28,28 +28,14 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
-import {Project} from "../../@types/types";
+import {defineComponent} from "@nuxtjs/composition-api";
 
-export default {
+export default defineComponent({
   name: "ProjectsHome",
-  setup() {
-    const { $content } = useContext()
-
-    const projects = useAsync(() => {
-      return $content(`projects`)
-        .limit(3)
-        .fetch<Project>()
-    })
-
-    const debug = () => {
-      console.log(projects)
-    }
-
-    return {
-      projects,
-      debug
+  props: {
+    projects: {
+      default: () => [],
     }
   }
-}
+})
 </script>

src/components/Skill.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import {computed} from '@nuxtjs/composition-api'
+import {computed, defineComponent} from '@nuxtjs/composition-api'
 
 interface SkillProps {
   skill: string,
@@ -18,7 +18,7 @@ interface SkillProps {
   cover: string
 }
 
-export default {
+export default defineComponent({
   name: "Skill",
   props: {
     skill: {
@@ -70,5 +70,5 @@ export default {
       getCoverLink
     }
   }
-}
+})
 </script>

src/components/SkillsAbout.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 import {Skill} from "../../@types/types";
 
-export default {
+export default defineComponent({
   name: "SkillsAbout",
   setup() {
     const {$content} = useContext()
@@ -35,5 +35,5 @@ export default {
       skills
     }
   }
-}
+})
 </script>

src/components/Tag.vue

@@ -8,7 +8,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from "@nuxtjs/composition-api";
+
+export default defineComponent({
   name: "TagPreview",
   props: {
     content: {
@@ -20,5 +22,5 @@ export default {
       default: true
     }
   },
-}
+})
 </script>