Fixing the invisibles posts

nuxt.config.ts

@@ -1,5 +1,3 @@
-import {defineNuxtConfig} from "@nuxtjs/composition-api";
-import {NuxtConfig} from "@nuxt/types";
 import head from './settings/Head'
 import buildModules from './settings/BuildModules'
 import modules from './settings/Modules'
@@ -9,7 +7,7 @@ import plugins from './settings/Plugins'
 import css from './settings/Style'
 import configs from './settings/RuntimeConfig'
 
-export default defineNuxtConfig({
+export default {
   head,
   modules,
   ...arch,
@@ -18,4 +16,4 @@ export default defineNuxtConfig({
   css,
   buildModules,
   ...configs
-} as NuxtConfig)
+}

package.json

@@ -11,24 +11,23 @@
   "dependencies": {
     "@nuxt/content": "^1.14.0",
     "@nuxtjs/axios": "^5.13.1",
-    "@nuxtjs/composition-api": "^0.22.4",
+    "@nuxtjs/composition-api": "0.22.4",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/redirect-module": "^0.3.1",
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/universal-storage": "^0.5.9",
-    "core-js": "^3.10.1",
+    "core-js": "^3.10.2",
     "nuxt": "^2.15.4",
     "nuxt-i18n": "^6.25.0",
     "prism-themes": "^1.6.0",
-    "sass": "^1.32.9",
+    "sass": "^1.32.11",
     "windicss": "^2.5.14"
   },
   "devDependencies": {
     "@nuxt/types": "^2.15.4",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.0.5",
-    "nuxt-vite": "^0.0.36",
     "nuxt-windicss": "^0.5.4",
     "sass-loader": "10.1.1"
   }

settings/BuildModules.ts

@@ -32,16 +32,9 @@ const windicss = {
   }
 }
 
-const vite = {
-  vue: {
-    jsx: false
-  }
-}
-
 export default [
   '@nuxt/typescript-build',
   '@nuxtjs/composition-api',
   ['nuxt-windicss', windicss],
-  //['nuxt-vite', vite],
   ['@nuxtjs/color-mode', color_mode],
 ] as NuxtOptionsModule[]

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>

src/layouts/error.vue

@@ -42,10 +42,10 @@
   </main>
 </template>
 
-<script>
-import {useRouter} from "@nuxtjs/composition-api";
+<script lang="ts">
+import {defineComponent, useRouter} from "@nuxtjs/composition-api";
 
-export default {
+export default defineComponent({
   name: "error",
   props: ['error'],
   head: {
@@ -57,7 +57,7 @@ export default {
 
     return {next}
   }
-}
+})
 </script>
 
 <style scoped lang="scss">

src/pages/blog/index.vue

@@ -37,10 +37,10 @@
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
 import {Post} from "../../../@types/types";
 
-export default {
+export default defineComponent({
   name: "blog",
   head() {
     return {
@@ -61,5 +61,5 @@ export default {
       posts,
     }
   }
-}
+})
 </script>

src/pages/index.vue

@@ -2,20 +2,43 @@
   <main>
     <Banner />
     <AboutHome />
-    <PostsHome />
-    <ProjectsHome />
+    <PostsHome :posts="posts"/>
+    <ProjectsHome :projects="projects"/>
     <AdHome />
   </main>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {Post, Project} from "../../@types/types";
 
 export default Vue.extend({
   head() {
     return {
       title: 'Arthur Danjou - FullStack Web & Software Developer'
     }
+  },
+  setup() {
+    const { $content, i18n } = useContext()
+
+    const projects = useAsync(() => {
+      return $content(`projects`)
+        .limit(3)
+        .fetch<Project>()
+    })
+
+    const posts = useAsync(() => {
+      return $content(`articles/${i18n.locale}`)
+        .sortBy('date', 'asc')
+        .limit(3)
+        .fetch<Post>()
+    })
+
+    return {
+      posts,
+      projects
+    }
   }
 })
 </script>