Changes for theme

app.vue

@@ -1,5 +1,4 @@
 <template>
-
   <NuxtLayout v-if="$route.name !== 'index'">
     <NuxtPage />
   </NuxtLayout>
@@ -7,5 +6,64 @@
 </template>
 
 <script>
+  import EventBus from '@/layouts/AppEventBus';
+  import NewsService from '@/service/NewsService';
   
+  export default {
+      themeChangeListener: null,
+      newsActivate: null,
+      newsService: null,
+      data() {
+          return {
+              storageKey: 'primevue'
+          }
+      },
+      created() {
+          this.newsService = new NewsService();
+      },
+      mounted() {
+          this.newsActivate = () => {
+              this.newsService.fetchNews().then(data => {
+                  this.$appState.announcement = data;
+  
+                  const itemString = localStorage.getItem(this.storageKey);
+                  if (itemString) {
+                      const item = JSON.parse(itemString);
+                      if (item.hiddenNews && item.hiddenNews !== data.id) {
+                          this.$appState.newsActive = true;
+                      }
+                      else this.$appState.newsActive = false;
+                  }
+                  else {
+                      this.$appState.newsActive = true;
+                  }
+              });
+          };
+
+          this.themeChangeListener = (event) => {
+              const elementId = 'theme-link';
+              const linkElement = document.getElementById(elementId);
+              const cloneLinkElement = linkElement.cloneNode(true);
+              const newThemeUrl = linkElement.getAttribute('href').replace(this.$appState.theme, event.theme);
+  
+              cloneLinkElement.setAttribute('id', elementId + '-clone');
+              cloneLinkElement.setAttribute('href', newThemeUrl);
+              cloneLinkElement.addEventListener('load', () => {
+                  linkElement.remove();
+                  cloneLinkElement.setAttribute('id', elementId);
+              });
+              linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+          
+              this.$appState.theme = event.theme;
+              this.$appState.darkTheme = event.dark;
+          };
+  
+          EventBus.on('theme-change', this.themeChangeListener);
+          EventBus.on('news-activate', this.newsActivate);
+      },
+      beforeUnmount() {
+          EventBus.off('theme-change', this.themeChangeListener);
+          EventBus.off('news-activate', this.newsActivate);
+      }
+  }
   </script>

layouts/AppConfigurator.vue

@@ -433,7 +433,6 @@ export default {
             event.preventDefault();
         },
         changeTheme(event, theme, dark) {
-            debugger
             EventBus.emit('theme-change', { theme: theme, dark: dark });
             event.preventDefault();
         },

layouts/default.vue

@@ -37,7 +37,7 @@ export default {
           this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
       }
   },
-  watch: {
+/*   watch: {
       $route: {
           immediate: true,
           handler(to) {
@@ -55,7 +55,7 @@ export default {
               this.$toast.removeAllGroups();
           }
       }
-  }, 
+  },  */
   methods: {
       onMenuButtonClick() {
           if (this.sidebarActive) {

nuxt.config.js

@@ -2,8 +2,10 @@ import { defineNuxtConfig } from 'nuxt'
 const path = require('path');
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+  ssr: true,
   typescript: false,
   components: true,
+
   css: [
     '@/assets/styles/primevue.css',
     '/node_modules/primeflex/primeflex.css',
@@ -11,6 +13,22 @@ export default defineNuxtConfig({
     '/node_modules/prismjs/themes/prism-coy.css',
     '@/assets/styles/flags.css'
   ],
+  app: {
+    head: {
+      link: [
+        {
+          id: 'theme-link',
+          rel: 'stylesheet',
+          href: 'themes/lara-light-blue/theme.css'
+        },
+        {
+          id: 'home-table-link',
+          rel: 'stylesheet',
+          href:  'styles/landing/themes/lara-light-blue/theme.css'
+        }
+      ]
+    },
+  },
   vite: {
       resolve: {
         alias: {

pages/index.vue

@@ -66,7 +66,6 @@ export default {
           this.replaceTableTheme(value);
       },
       replaceTableTheme(newTheme) {
-        debugger
           const elementId = 'home-table-link';
           const linkElement = document.getElementById(elementId);
           const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;

pages/landing/HeroSection.vue

@@ -81,10 +81,10 @@
         </div>
 
         <section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
-            <router-link to="/setup" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
+            <nuxt-link to="/setup" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
                 Get Started 
                 <i class="pi pi-arrow-right ml-3"></i>
-            </router-link>
+            </nuxt-link>
             <div class="box download-box font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out">
                 <i class="download-icon pi pi-download mr-3"></i>
                 <span class="font-bold" :style="{fontFamily:'monaco'}">npm i primevue</span>