Load news from json

app.vue

@@ -6,15 +6,13 @@
 
 <script>
 import EventBus from '@/layouts/AppEventBus';
-import NewsService from '@/service/NewsService';
+import News from '@/assets/data/news.json';
 
 export default {
     themeChangeListener: null,
     newsActivate: null,
-    newsService: null,
     data() {
         return {
-            storageKey: 'primevue',
             layout: 'custom'
         };
     },
@@ -30,27 +28,23 @@ export default {
             }
         }
     },
-    created() {
-        this.newsService = new NewsService();
-    },
     mounted() {
-        /*this.newsActivate = () => {
+        this.newsActivate = () => {
-            this.newsService.fetchNews().then((data) => {
+            this.$appState.announcement = News;
-                this.$appState.announcement = data;
+            const itemString = localStorage.getItem(this.$appState.storageKey);
 
-                const itemString = localStorage.getItem(this.storageKey);
+            if (itemString) {
+                const item = JSON.parse(itemString);
 
-                if (itemString) {
+                if (!item.hiddenNews || item.hiddenNews !== News.id)
-                    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;
-                }
+                
-            });
+                else this.$appState.newsActive = false;
-        };*/
+            } 
+            else {
+                this.$appState.newsActive = true;
+            }
+        };
 
         this.themeChangeListener = (event) => {
             const elementId = 'theme-link';
@@ -71,11 +65,11 @@ export default {
         };
 
         EventBus.on('theme-change', this.themeChangeListener);
-        //EventBus.on('news-activate', this.newsActivate);
+        EventBus.on('news-activate', this.newsActivate);
     },
     beforeUnmount() {
         EventBus.off('theme-change', this.themeChangeListener);
-        //EventBus.off('news-activate', this.newsActivate);
+        EventBus.off('news-activate', this.newsActivate);
     }
 };
 </script>

assets/data/news.json

@@ -0,0 +1,9 @@
+{
+    "id": 30,
+    "content": "Introducing the all-new Apollo Vite Template",
+    "linkText": "View Demo",
+    "linkHref": "https://www.primefaces.org/apollo-vue",
+    "backgroundStyle": "background-color:#4f8ff7",
+    "textStyle": "color:#ffffff;font-weight:500",
+    "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"
+}

layouts/AppNews.vue

@@ -15,14 +15,8 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    data() {
-        return {
-            storageKey: 'primevue',
-            hovered: false
-        };
-    },
     mounted() {
-        //EventBus.emit('news-activate');
+        EventBus.emit('news-activate');
     },
     methods: {
         onClose() {
@@ -32,7 +26,7 @@ export default {
                 hiddenNews: this.$appState.announcement.id
             };
 
-            localStorage.setItem(this.storageKey, JSON.stringify(item));
+            localStorage.setItem(this.$appState.storageKey, JSON.stringify(item));
         }
     }
 };

plugins/appState.js

@@ -1,6 +1,14 @@
 const $appState = {
     install: (Vue, options) => {
-        Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-blue', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: {} });
+        Vue.config.globalProperties.$appState = reactive({ 
+            theme: 'lara-light-blue', 
+            darkTheme: false, 
+            codeSandbox: false, 
+            sourceType: 'options-api', 
+            newsActive: true, 
+            announcement: {},
+            storageKey: 'primevue'
+        });
     }
 };
 

service/NewsService.js

@@ -1,5 +0,0 @@
-export default class NewsService {
-    fetchNews() {
-        return fetch('https://www.primefaces.org/cdn/news/primevue.json', { cache: 'no-store', mode: 'no-cors' }).then((res) => res.json());
-    }
-}