Big commit

frontend/app/pages/blog/index.vue

@@ -1,28 +1,35 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import { useAsyncData } from '#app';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 const { locale } = useI18n();
 const localePath = useLocalePath()
 
-const {data: posts} = useAsyncData('posts', async () => 
+const {data: posts, refresh} = useAsyncData('blog-posts', async () => 
 await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
-, {watch: [locale]});
+, {watch: [locale, () => useRoute().path]});
+
+onActivated(() => {
+  refresh();
+});
 </script>
 
 <template>
     <TableHeader></TableHeader>
-    <Container>
-    <h2>Blog</h2>
-    <ul>
-      <li v-for="post in posts" :key="post.slug">
-        <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">{{ post.title }}</NuxtLink>
-        <span class="dash">-</span>
-        <span>{{ post.date }}</span>
-        <span class="dash">-</span>
-        <span>{{ post.description }}</span>
-      </li>
-    </ul>
-    </Container>
+    <FixedLayout>
+      <Container>
+      <h2>Blog</h2>
+      <ul>
+        <li v-for="post in posts" :key="post.slug">
+          <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">{{ post.title }}</NuxtLink>
+          <span class="dash">-</span>
+          <span>{{ post.date }}</span>
+          <span class="dash">-</span>
+          <span>{{ post.description }}</span>
+        </li>
+      </ul>
+      </Container>
+    </FixedLayout>
     <Footer></Footer>
 </template>