Some ssr issue solved

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() {

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>

layouts/custom.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+  <slot></slot>
+</div>
+</template>

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'
         }
       ],
     },

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",

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",

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: {

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>
 

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)
+        }    
     }
 }