feat: Seo meta tag

pages/bai-viet/[slug].vue

@@ -16,6 +16,7 @@ import { useDynamicPageStore } from '~/stores/dynamic-page';
 import { useArticleStore } from '~/stores/articles';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 const { currentArticle } = storeToRefs(useArticleStore());
+
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
   article: useArticleStore(),
@@ -37,7 +38,6 @@ const loadPage = async (contentType: string | number) => {
 
 watch(currentArticle, async () => {
   let isContentType : string = '';
-  console.log(currentArticle.value, 'type')
   switch (currentArticle.value?.contentType) {
     case 1:
         isContentType = 'trang-doi-song'
@@ -67,15 +67,16 @@ watch(currentArticle, async () => {
         isContentType = 'trang-chi-tiet-emagazine'
         break;
   }
-  await loadPage(isContentType)
+  await loadPage(isContentType);
 }, { deep: true })
 
 useSeoMeta({
-    title: currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
+  title: () => currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
-    ogTitle: currentArticle.value?.title,
+  description: () => currentArticle.value?.intro,
-    description: currentArticle.value?.intro,
+  ogTitle: () => currentArticle.value?.title,
-    ogDescription: currentArticle.value?.intro,
+  ogImage: () => currentArticle.value?.thumbnail,
-    ogImage: currentArticle.value?.thumbnail,
+  ogDescription: () => currentArticle.value?.intro,
+  twitterCard: 'summary_large_image',
 })
 </script>
 

stores/articles.ts

@@ -12,9 +12,9 @@ export const useArticleStore = defineStore("article", () => {
 
     const getArticleBySlug = async (slug: string) => {
         try {
-            const { data} = await useFetch(`/api/articles/get-by-slug/${slug}`)
+            const { data: article } = await useAsyncData('article', () => $fetch(`/api/articles/get-by-slug/${slug}`))
             currentArticle.value = {}
-            currentArticle.value = data.value.item
+            currentArticle.value = article.value?.item
         } catch (error: any) {}
     }