From 148a17057fd5de07a16de176c0b4e49ae1608cd6 Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Tue, 13 Sep 2022 14:29:45 +0300
Subject: [PATCH] Some ssr issue solved

---
 app.vue                      | 19 ++++++++++++++++---
 layouts/AppNews.vue          |  8 ++++----
 layouts/custom.vue           |  5 +++++
 nuxt.config.js               |  6 +++---
 package-lock.json            |  2 +-
 package.json                 |  2 +-
 pages/index.vue              |  6 ++++--
 pages/steps/Confirmation.vue |  2 ++
 service/NewsService.js       | 10 ++++++++--
 9 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 layouts/custom.vue

diff --git a/app.vue b/app.vue
index f118eb912..2138df0f8 100644
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,7 @@
 <template>
-  <NuxtLayout v-if="$route.name !== 'index'">
+  <NuxtLayout :name="layout">
     <NuxtPage />
   </NuxtLayout>
-  <NuxtPage v-else />
 </template>
 
 <script>
@@ -15,7 +14,21 @@ export default {
     newsService: null,
     data() {
         return {
-            storageKey: 'primevue'
+            storageKey: 'primevue',
+            layout: 'custom',
+        }
+    },
+    watch: {
+        $route: {
+            immediate: true,
+            handler(to) {
+                if (to.name === 'index') {
+                   this.layout = 'custom';
+                }
+                else {
+                    this.layout = 'default';
+                }
+            }
         }
     },
     created() {
diff --git a/layouts/AppNews.vue b/layouts/AppNews.vue
index 81b69ae65..9115d9667 100644
--- a/layouts/AppNews.vue
+++ b/layouts/AppNews.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="layout-news" :style="$appState.announcement.backgroundStyle">
+    <div class="layout-news" :style="$appState?.announcement?.backgroundStyle">
         <i></i>
         <div class="layout-news-content">
-            <span class="layout-news-text" :style="$appState.announcement.textStyle">{{$appState.announcement.content}}</span>
-            <a class="layout-news-link" :href="$appState.announcement.linkHref">{{$appState.announcement.linkText}}</a>
+            <span class="layout-news-text" :style="$appState?.announcement?.textStyle">{{$appState?.announcement?.content}}</span>
+            <a class="layout-news-link" :href="$appState?.announcement?.linkHref">{{$appState?.announcement?.linkText}}</a>
         </div>
-        <a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
+        <a class="layout-news-close" :style="$appState?.announcement?.textStyle" @click="onClose">
             <span class="pi pi-times"></span>
         </a>
     </div>
diff --git a/layouts/custom.vue b/layouts/custom.vue
new file mode 100644
index 000000000..726b9717a
--- /dev/null
+++ b/layouts/custom.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+  <slot></slot>
+</div>
+</template>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 216317d74..86f12dff5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,7 +1,7 @@
 import { defineNuxtConfig } from 'nuxt'
 const path = require('path');
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import rollupOptions from './rollup.config'
+
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   ssr: true,
@@ -13,12 +13,12 @@ export default defineNuxtConfig({
         {
           id: 'theme-link',
           rel: 'stylesheet',
-          href: `./themes/lara-light-blue/theme.css`
+          href: `/themes/lara-light-blue/theme.css`
         },
         {
           id: 'home-table-link',
           rel: 'stylesheet',
-          href:  './styles/landing/themes/lara-light-blue/theme.css'
+          href:  '/styles/landing/themes/lara-light-blue/theme.css'
         }
       ],
     },
diff --git a/package-lock.json b/package-lock.json
index 083d8e538..db017b8f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "gulp-uglify": "^3.0.2",
         "gulp-uglifycss": "^1.0.6",
         "jsdom": "^19.0.0",
-        "nuxt": "3.0.0-rc.9",
+        "nuxt": "^3.0.0-rc.9",
         "primeflex": "^3.2.1",
         "primeicons": "^5.0.0",
         "prismjs": "^1.29.0",
diff --git a/package.json b/package.json
index 0a3ccf99f..7fbb7b6fc 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "gulp-uglify": "^3.0.2",
     "gulp-uglifycss": "^1.0.6",
     "jsdom": "^19.0.0",
-    "nuxt": "3.0.0-rc.9",
+    "nuxt": "^3.0.0-rc.9",
     "primeflex": "^3.2.1",
     "primeicons": "^5.0.0",
     "prismjs": "^1.29.0",
diff --git a/pages/index.vue b/pages/index.vue
index a43eec16b..8184a7b57 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,8 @@
 <template>
     <div :class="landingClass">
+        <ClientOnly>
         <div class="landing-intro">
-            <AppNews v-if="$appState.newsActive" />
+            <AppNews v-if="true" />
             <HeaderSection @theme-toggle="onThemeToggle" />
             <HeroSection />
         </div>
@@ -13,6 +14,7 @@
         <UsersSection />
         <FeaturesSection />
         <FooterSection />
+    </ClientOnly>
     </div> 
 </template>
 
@@ -89,7 +91,7 @@ export default {
   },
   computed: {
       landingClass() {
-          return ['landing', {'landing-dark': this.$appState.darkTheme, 'landing-light': !this.$appState.darkTheme, 'landing-news-active': this.$appState.newsActive}];
+          return ['landing', {'landing-dark': this.$appState?.darkTheme, 'landing-light': !this.$appState?.darkTheme, 'landing-news-active': this.$appState?.newsActive}];
       }
   },
   components: {
diff --git a/pages/steps/Confirmation.vue b/pages/steps/Confirmation.vue
index 3f9e02360..3ff440dd4 100755
--- a/pages/steps/Confirmation.vue
+++ b/pages/steps/Confirmation.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="stepsdemo-content">
+        <ClientOnly>
         <Card>
             <template v-slot:title> Confirmation </template>
             <template v-slot:content>
@@ -47,6 +48,7 @@
                 </div>
             </template>
         </Card>
+        </ClientOnly>
     </div>
 </template>
 
diff --git a/service/NewsService.js b/service/NewsService.js
index 06fe7b116..3d6cb9ead 100644
--- a/service/NewsService.js
+++ b/service/NewsService.js
@@ -1,6 +1,12 @@
 export default class NewsService {
 
-    fetchNews() {
-        return fetch('https://www.primefaces.org/cdn/news/primevue.json', {cache: 'no-store'}).then(res => res.json());
+    async fetchNews() {
+        try {
+            const data = await useFetch('https://www.primefaces.org/cdn/news/primevue.json', {cache: 'no-store'})
+            console.log(data)
+            return await data.json();
+        } catch (error) {
+            console.log(error)
+        }    
     }
 }
\ No newline at end of file