minhnt-dev: oonly ssr fix

pages/[categories]/index.vue

@@ -2,18 +2,21 @@
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
 import { useDynamicPageStore } from '~/stores/dynamic-page';
-const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
 const route = useRoute();
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
 
-await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path.replace('/', '')))
+const { data } = await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path.replace('/', '')))
+const asycnCurrentPage = data.value.currentPage;
+const asycnSectionPublished = data.value.sectionPublished;
+const asycnComponentPublished = data.value.componentPublished;
+
 useHead({
-  title: () => currentPage.value.title || '',
+  title: () => asycnCurrentPage.title || '',
   description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
-  ogTitle: () => currentPage.value.title || '',
+  ogTitle: () => asycnCurrentPage.title || '',
   ogImage: () => '~/assets/images/thumbnail.jpg',
   ogDescription: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
   twitterCard: () => 'summary_large_image',
@@ -21,10 +24,10 @@ useHead({
 </script>
 
 <template>
-  <main class="h-screen" v-if="currentPage">
-    <DynamicTemplate :settings="currentPage.settings">
+  <main class="h-screen" v-if="asycnCurrentPage">
+    <DynamicTemplate :settings="asycnCurrentPage.settings">
         <DynamicSection
-          v-for="(section, index) in sectionPublished"
+          v-for="(section, index) in asycnSectionPublished"
           :key="index"
           :settings="section.settings"
           :content="section.content ? JSON.parse(section.content) : null"
@@ -32,4 +35,4 @@ useHead({
         />
     </DynamicTemplate>
   </main>
-</template>
+</template>

pages/bai-viet/[slug].vue

@@ -10,22 +10,18 @@ import DynamicSection from "~/components/dynamic-page/page-section/templates/ind
 
 const route = useRoute();
 
-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(),
 });
 
-const loadPage = async () => {
-  const promises = [];
-  promises.push(store.article.getArticleBySlug(route.params.slug));
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+import { useArticleStore } from '~/stores/articles';
 
+const loadPage = async () => {
+  const article = await store.article.getArticleBySlug(route.params.slug);
   let isContentType = '';
-  switch (currentArticle.value?.contentType) {
+  switch (article.value?.contentType) {
     case 1:
       isContentType = 'trang-chi-tiet-bai-viet-general';
       break;
@@ -39,11 +35,11 @@ const loadPage = async () => {
       isContentType = 'trang-chi-tiet-bai-viet-video';
       break;
     case 5:
-      if (currentArticle.value?.layoutType === 4) {
+      if (article.value?.layoutType === 4) {
         isContentType = 'trang-chi-tiet-bai-viet-emagazine';
         break;
       }
-      if (currentArticle.value?.layoutType === 3) {
+      if (article.value?.layoutType === 3) {
         isContentType = 'trang-chi-tiet-bai-viet-infographics';
         break;
       }
@@ -51,34 +47,42 @@ const loadPage = async () => {
       isContentType = 'trang-chi-tiet-bai-viet-general';
       break;
   }
-  promises.push(store.dynamicPage.fetchPageByCode(isContentType));
-  await Promise.all(promises);
+  const dynamicPage = await store.dynamicPage.fetchPageByCode(isContentType);
+
+  return {
+    article,
+    dynamicPage
+  };
 };
 
-await useAsyncData('detail-article', () => loadPage());
+const { data } = await useAsyncData('detail-article', () => loadPage());
+const article = data.value?.article;
+const dynamicPage = data.value?.dynamicPage;
+
+const asycnCurrentPage = dynamicPage.currentPage;
+const asycnSectionPublished = dynamicPage.sectionPublished;
+const asycnComponentPublished = dynamicPage.componentPublished;
 
 useSeoMeta({
-  title: () => currentArticle.value.title.replace(/<[^>]+>/g, ''),
-  description: () => currentArticle.value.intro.replace(/<[^>]+>/g, ''),
-  ogTitle: () => currentArticle.value.title.replace(/<[^>]+>/g, ''),
-  ogImage: () => currentArticle.value.thumbnail,
-  ogDescription: () => currentArticle.value.intro.replace(/<[^>]+>/g, ''),
+  title: () => article.title.replace(/<[^>]+>/g, ''),
+  description: () => article.intro.replace(/<[^>]+>/g, ''),
+  ogTitle: () => article.title.replace(/<[^>]+>/g, ''),
+  ogImage: () => article.thumbnail,
+  ogDescription: () => article.intro.replace(/<[^>]+>/g, ''),
   twitterCard: () => 'summary_large_image',
 })
 </script>
 
 <template>
-  <main class="h-screen" v-if="currentPage && currentPage.settings">
-    <DynamicTemplate :settings="currentPage.settings">
-      <template v-if="sectionPublished && sectionPublished.length > 0">
+  <main class="h-screen" v-if="asycnCurrentPage">
+    <DynamicTemplate :settings="asycnCurrentPage.settings">
         <DynamicSection
-          v-for="(section, index) in sectionPublished"
+          v-for="(section, index) in asycnSectionPublished"
           :key="index"
           :settings="section.settings"
           :content="section.content ? JSON.parse(section.content) : null"
           :section="section"
         />
-      </template>
     </DynamicTemplate>
   </main>
 </template>

pages/index.vue

@@ -3,14 +3,17 @@ import ADSDefault from '@/assets/images/ads.jpg'
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
 import { useDynamicPageStore } from '~/stores/dynamic-page';
-const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
 const route = useRoute();
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
 
-await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
+const { data } = await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
+const asycnCurrentPage = data.value.currentPage;
+const asycnSectionPublished = data.value.sectionPublished;
+const asycnComponentPublished = data.value.componentPublished;
+
 useHead({
   title: () => 'Trang chủ',
   description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
@@ -22,10 +25,10 @@ useHead({
 </script>
 
 <template>
-  <main class="h-screen" v-if="currentPage">
-    <DynamicTemplate :settings="currentPage.settings">
+  <main class="h-screen" v-if="asycnCurrentPage">
+    <DynamicTemplate :settings="asycnCurrentPage.settings">
         <DynamicSection
-          v-for="(section, index) in sectionPublished"
+          v-for="(section, index) in asycnSectionPublished"
           :key="index"
           :settings="section.settings"
           :content="section.content ? JSON.parse(section.content) : null"