[FEAT] Fix vue warn

src/views/AboutUs.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-  import { onMounted } from 'vue';
   import { useSEO } from '../composables/useSEO';
   import { useStructuredData } from '../composables/useStructuredData';
 
   const { addBreadcrumbSchema } = useStructuredData();
 
-  onMounted(() => {
+  // Set SEO synchronously
   useSEO({
     title: 'About Us - Our Mission & Story',
     description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
@@ -18,7 +17,6 @@
     { name: 'Home', url: '/' },
     { name: 'About Us', url: '/about' }
   ]);
-  });
 </script>
 
 <template>

src/views/BlogDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue';
+  import { ref, onMounted, watch, computed } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useBlog, type BlogPost } from '../composables/useBlog';
   import { useSEO } from '../composables/useSEO';
@@ -13,45 +13,63 @@
   const post = ref<BlogPost | undefined>(undefined);
   const renderedContent = ref('');
 
-  onMounted(async () => {
+  const slug = computed(() => route.params.slug as string);
-    const slug = route.params.slug as string;
-    post.value = await getPost(slug);
 
-    if (post.value) {
+  // Initialize with default SEO (will be updated when post loads)
-      renderedContent.value = await marked(post.value.content);
-
-      // Set SEO meta tags
   useSEO({
-        title: post.value.title,
+    title: 'Blog Post',
-        description: post.value.description,
+    description: 'Read our latest article about spritesheet generation and game development.',
-        image: post.value.image,
+    url: `/blog/${slug.value}`,
-        url: `/blog/${slug}`,
     type: 'article',
-        author: post.value.author || 'nu11ed',
+    keywords: 'sprite sheet, game development, blog'
-        publishedTime: post.value.date,
-        keywords: post.value.keywords || 'sprite sheet, game development, blog'
   });
 
-      // Add structured data
-      addBlogPostSchema({
-        title: post.value.title,
-        description: post.value.description,
-        author: post.value.author || 'nu11ed',
-        datePublished: post.value.date,
-        image: post.value.image,
-        url: `/blog/${slug}`
-      });
-
-      // Add breadcrumb
   addBreadcrumbSchema([
     { name: 'Home', url: '/' },
     { name: 'Blog', url: '/blog' },
-        { name: post.value.title, url: `/blog/${slug}` }
+    { name: 'Article', url: `/blog/${slug.value}` }
   ]);
+
+  onMounted(async () => {
+    post.value = await getPost(slug.value);
+
+    if (post.value) {
+      renderedContent.value = await marked(post.value.content);
     } else {
       router.push({ name: 'blog-overview' });
     }
   });
+
+  // Update SEO and structured data when post loads
+  watch(post, (newPost) => {
+    if (newPost) {
+      useSEO({
+        title: newPost.title,
+        description: newPost.description,
+        image: newPost.image,
+        url: `/blog/${slug.value}`,
+        type: 'article',
+        author: newPost.author || 'nu11ed',
+        publishedTime: newPost.date,
+        keywords: newPost.keywords || 'sprite sheet, game development, blog'
+      });
+
+      addBlogPostSchema({
+        title: newPost.title,
+        description: newPost.description,
+        author: newPost.author || 'nu11ed',
+        datePublished: newPost.date,
+        image: newPost.image,
+        url: `/blog/${slug.value}`
+      });
+
+      addBreadcrumbSchema([
+        { name: 'Home', url: '/' },
+        { name: 'Blog', url: '/blog' },
+        { name: newPost.title, url: `/blog/${slug.value}` }
+      ]);
+    }
+  });
 </script>
 
 <template>

src/views/BlogOverview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted, watch } from 'vue';
   import { useBlog, type BlogPost } from '../composables/useBlog';
   import { useSEO } from '../composables/useSEO';
   import { useStructuredData } from '../composables/useStructuredData';
@@ -9,10 +9,7 @@
   const { addBlogListSchema, addBreadcrumbSchema } = useStructuredData();
   const posts = ref<BlogPost[]>([]);
 
-  onMounted(async () => {
+  // Set SEO meta tags synchronously
-    posts.value = await getPosts();
-
-    // Set SEO meta tags
   useSEO({
     title: 'Blog - Latest Articles on Spritesheet Generation',
     description: 'Explore our latest articles about sprite sheet generation, game development, pixel art, and sprite animation techniques.',
@@ -21,10 +18,21 @@
     keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation'
   });
 
-    // Add blog list structured data
+  // Add breadcrumb synchronously
-    if (posts.value.length > 0) {
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'Blog', url: '/blog' }
+  ]);
+
+  onMounted(async () => {
+    posts.value = await getPosts();
+  });
+
+  // Watch posts and add structured data when available
+  watch(posts, (newPosts) => {
+    if (newPosts.length > 0) {
       addBlogListSchema(
-        posts.value.map(post => ({
+        newPosts.map(post => ({
           title: post.title,
           description: post.description,
           author: post.author || 'nu11ed',
@@ -34,13 +42,7 @@
         }))
       );
     }
-
+  }, { immediate: true });
-    // Add breadcrumb
-    addBreadcrumbSchema([
-      { name: 'Home', url: '/' },
-      { name: 'Blog', url: '/blog' }
-    ]);
-  });
 </script>
 
 <template>

src/views/Contact.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-  import { onMounted } from 'vue';
   import { useSEO } from '../composables/useSEO';
   import { useStructuredData } from '../composables/useStructuredData';
 
   const { addBreadcrumbSchema } = useStructuredData();
 
-  onMounted(() => {
+  // Set SEO synchronously
   useSEO({
     title: 'Contact Us - Get in Touch',
     description: 'Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We\'d love to hear from you!',
@@ -18,7 +17,6 @@
     { name: 'Home', url: '/' },
     { name: 'Contact', url: '/contact' }
   ]);
-  });
 </script>
 
 <template>

src/views/HomeView.seo.ts

@@ -1,4 +1,3 @@
-import { onMounted } from 'vue';
 import { useSEO } from '../composables/useSEO';
 import { useStructuredData } from '../composables/useStructuredData';
 import { useHead } from '@vueuse/head';
@@ -6,8 +5,7 @@ import { useHead } from '@vueuse/head';
 export function useHomeViewSEO() {
   const { addOrganizationSchema, addWebSiteSchema } = useStructuredData();
 
-  onMounted(() => {
+  // Set page SEO synchronously
-    // Set page SEO
   useSEO({
     title: 'Spritesheet Generator - Create Game Spritesheets Online',
     description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
@@ -61,5 +59,4 @@ export function useHomeViewSEO() {
       }
     ]
   });
-  });
 }

src/views/PrivacyPolicy.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-  import { onMounted } from 'vue';
   import { useSEO } from '../composables/useSEO';
   import { useStructuredData } from '../composables/useStructuredData';
 
   const { addBreadcrumbSchema } = useStructuredData();
 
-  onMounted(() => {
+  // Set SEO synchronously
   useSEO({
     title: 'Privacy Policy - Your Data Protection',
     description: 'Read our privacy policy. Spritesheet Generator is a client-side tool that does not collect personal data or upload your images to our servers.',
@@ -18,7 +17,6 @@
     { name: 'Home', url: '/' },
     { name: 'Privacy Policy', url: '/privacy-policy' }
   ]);
-  });
 </script>
 
 <template>