From 1c71b5d1e950d12331e6eaff02dd3fbbaf2e5542 Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Tue, 13 Sep 2022 16:01:06 +0300
Subject: [PATCH] nuxt-links added

---
 app.vue                           |  2 -
 layouts/AppConfigurator.vue       | 71 +++++++++++++++----------------
 layouts/AppFooter.vue             | 14 +++---
 layouts/AppNews.vue               |  2 +
 layouts/AppTopBar.vue             | 38 ++++++++---------
 pages/landing/BlockSection.vue    |  4 +-
 pages/landing/DesignerSection.vue |  4 +-
 pages/landing/FooterSection.vue   | 32 +++++++-------
 pages/landing/HeaderSection.vue   | 20 ++++-----
 pages/landing/TemplateSection.vue | 16 +++----
 pages/landing/ThemeSection.vue    |  2 +-
 pages/liveeditor/LiveEditor.vue   |  3 +-
 service/NewsService.js            |  1 -
 13 files changed, 103 insertions(+), 106 deletions(-)

diff --git a/app.vue b/app.vue
index 2138df0f8..ddb123388 100644
--- a/app.vue
+++ b/app.vue
@@ -54,8 +54,6 @@ export default {
         };
 
         this.themeChangeListener = (event) => {
-            console.log(this.$appState.theme);
-
             const elementId = 'theme-link';
             const linkElement = document.getElementById(elementId);
             const cloneLinkElement = linkElement.cloneNode(true);
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 492f91d9b..73d2830c9 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -1,12 +1,12 @@
 <template>
     <div :class="containerClass">
         <div class="layout-config-content-wrapper">
-            <a href="#" class="layout-config-button" @click="toggleConfigurator">
+            <nuxt-link to="#" class="layout-config-button" @click="toggleConfigurator">
                 <i class="pi pi-cog"></i>
-            </a>
-            <a href="#" class="layout-config-close" @click="hideConfigurator">
+            </nuxt-link>
+            <nuxt-link to="#" class="layout-config-close" @click="hideConfigurator">
                 <i class="pi pi-times"></i>
-            </a>
+            </nuxt-link>
 
             <div class="layout-config-content">
                 <div>
@@ -23,7 +23,7 @@
                     <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange"  />
 
                     <h4>Free Themes</h4>
-                    <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
+                    <p>Built-in component themes created by the <nuxt-link to="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</nuxt-link>.</p>
 
                     <h5>Bootstrap</h5>
                     <div class="grid free-themes">
@@ -258,7 +258,7 @@
                     </div>
 
                     <h4>Premium Themes</h4>
-                    <p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
+                    <p>Premium themes are only available exclusively for <nuxt-link to="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</nuxt-link> subscribers and therefore not included in PrimeVue core.</p>
                     <div class="grid free-themes">
                         <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
@@ -299,77 +299,77 @@
                     </div>
 
                     <h4>Admin Templates</h4>
-                    <p>Beautifully crafted <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
+                    <p>Beautifully crafted <nuxt-link to="https://cli.vuejs.org">Vue CLI</nuxt-link> application templates by the PrimeTek design team.</p>
                     <div class="grid premium-themes">
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/sakai-vue">
+                            <nuxt-link to="https://www.primefaces.org/sakai-vue">
                                 <img alt="Ultima" src="@/assets/images/layouts/sakai-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/atlantis-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/atlantis-vue">
                                 <img alt="Atlantis" src="@/assets/images/layouts/atlantis-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/freya-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/freya-vue">
                                 <img alt="Freya" src="@/assets/images/layouts/freya-vue.png">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/ultima-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/ultima-vue">
                                 <img alt="Ultima" src="@/assets/images/layouts/ultima-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/diamond-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/diamond-vue">
                                 <img alt="Diamond" src="@/assets/images/layouts/diamond-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/verona-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/verona-vue">
                                 <img alt="Verona" src="@/assets/images/layouts/verona-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/poseidon-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/poseidon-vue">
                                 <img alt="Poseidon" src="@/assets/images/layouts/poseidon-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/sapphire-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/sapphire-vue">
                                 <img alt="Sapphire" src="@/assets/images/layouts/sapphire-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/serenity-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/serenity-vue">
                                 <img alt="Serenity" src="@/assets/images/layouts/serenity-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/babylon-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/babylon-vue">
                                 <img alt="Babylon" src="@/assets/images/layouts/babylon-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/avalon-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/avalon-vue">
                                 <img alt="Avalon" src="@/assets/images/layouts/avalon-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/apollo-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/apollo-vue">
                                 <img alt="Apollo" src="@/assets/images/layouts/apollo-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/roma-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/roma-vue">
                                 <img alt="Roma" src="@/assets/images/layouts/roma-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                         <div class="col-12 md:col-6">
-                            <a href="https://www.primefaces.org/layouts/prestige-vue">
+                            <nuxt-link to="https://www.primefaces.org/layouts/prestige-vue">
                                 <img alt="Prestige" src="@/assets/images/layouts/prestige-vue.jpg">
-                            </a>
+                            </nuxt-link>
                         </div>
                     </div>
                 </div>
@@ -433,7 +433,6 @@ export default {
             event.preventDefault();
         },
         changeTheme(event, theme, dark) {
-            console.log(event, theme, dark)
             EventBus.emit('theme-change', { theme: theme, dark: dark });
             event.preventDefault();
         },
diff --git a/layouts/AppFooter.vue b/layouts/AppFooter.vue
index 36c94d006..005e405ae 100755
--- a/layouts/AppFooter.vue
+++ b/layouts/AppFooter.vue
@@ -2,19 +2,19 @@
     <div class="layout-footer">
         <div class="layout-footer-left">
             <span>PrimeVue 3.17.0-SNAPSHOT on Vue 3 by </span>
-            <a href="https://www.primetek.com.tr">PrimeTek</a>
+            <nuxt-link to="https://www.primetek.com.tr">PrimeTek</nuxt-link>
         </div>
 
         <div class="layout-footer-right">
-            <a href="https://github.com/primefaces/primevue" class="mr-3">
+            <nuxt-link to="https://github.com/primefaces/primevue" class="mr-3">
                 <i class="pi pi-github"></i>
-            </a>
-            <a href="https://twitter.com/primevue" class="mr-3">
+            </nuxt-link>
+            <nuxt-link to="https://twitter.com/primevue" class="mr-3">
                 <i class="pi pi-twitter"></i>
-            </a>
-            <a href="https://discord.com/invite/gzKFYnpmCY">
+            </nuxt-link>
+            <nuxt-link to="https://discord.com/invite/gzKFYnpmCY">
                 <i class="pi pi-discord"></i>
-            </a>
+            </nuxt-link>
         </div>
     </div>
 </template>
diff --git a/layouts/AppNews.vue b/layouts/AppNews.vue
index 9115d9667..5ca699ee8 100644
--- a/layouts/AppNews.vue
+++ b/layouts/AppNews.vue
@@ -1,4 +1,5 @@
 <template>
+    <ClientOnly>
     <div class="layout-news" :style="$appState?.announcement?.backgroundStyle">
         <i></i>
         <div class="layout-news-content">
@@ -9,6 +10,7 @@
             <span class="pi pi-times"></span>
         </a>
     </div>
+</ClientOnly>
 </template>
 
 <script>
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index ad0fd2f77..35184c54f 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -15,10 +15,10 @@
                     <ul v-show="activeMenuIndex === 0">
                         <li class="topbar-submenu-header">THEMING</li>
                         <li><nuxt-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></nuxt-link></li>
-                        <li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a></li>
-                        <li><a href="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></a></li>
+                        <li><nuxt-link to="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></nuxt-link></li>
                         <li><nuxt-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></nuxt-link></li>
-                        <li><a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></a></li>
+                        <li><nuxt-link to="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></nuxt-link></li>
 
                         <li class="topbar-submenu-header">BOOTSTRAP</li>
                         <li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li>
@@ -83,33 +83,33 @@
                 <transition name="p-connected-overlay" @enter="onMenuEnter">
                     <ul v-show="activeMenuIndex === 1">
                         <li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
-                        <li><a href="https://www.primefaces.org/sakai-vue"><img src="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></a></li>
+                        <li><nuxt-link to="https://www.primefaces.org/sakai-vue"><img src="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></nuxt-link></li>
                         <li class="topbar-submenu-header">PREMIUM ADMIN TEMPLATES</li>
-                        <li><a href="https://www.primefaces.org/layouts/atlantis-vue"><img src="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/freya-vue"><img src="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/diamond-vue"><img src="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/verona-vue"><img src="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/poseidon-vue"><img src="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/sapphire-vue"><img src="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/serenity-vue"><img src="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/ultima-vue"><img src="@/assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/avalon-vue"><img src="@/assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/babylon-vue"><img src="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/apollo-vue"><img src="@/assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/roma-vue"><img src="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a></li>
-                        <li><a href="https://www.primefaces.org/layouts/prestige-vue"><img src="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></a></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/atlantis-vue"><img src="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/freya-vue"><img src="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/diamond-vue"><img src="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/verona-vue"><img src="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/poseidon-vue"><img src="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/sapphire-vue"><img src="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/serenity-vue"><img src="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/ultima-vue"><img src="@/assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/avalon-vue"><img src="@/assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/babylon-vue"><img src="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/apollo-vue"><img src="@/assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/roma-vue"><img src="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></nuxt-link></li>
+                        <li><nuxt-link to="https://www.primefaces.org/layouts/prestige-vue"><img src="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></nuxt-link></li>
                     </ul>
                 </transition>
             </li>
             <li class="topbar-submenu topbar-resources-submenu">
-                <a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank"><span>Blocks</span></a>
+                <nuxt-link to="https://www.primefaces.org/primeblocks-vue/#/" target="_blank"><span>Blocks</span></nuxt-link>
             </li>
             <li class="topbar-submenu">
                 <a tabindex="0" @click="toggleMenu($event, 3)">v3.16.2</a>
                 <transition name="p-connected-overlay" @enter="onMenuEnter">
                     <ul v-show="activeMenuIndex === 3" style="width: 100%">
                         <li><nuxt-link to="/"><span class="m-0">v3.16.2</span></nuxt-link></li>
-                        <li><a href="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.0</span></a></li>
+                        <li><nuxt-link to="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.0</span></nuxt-link></li>
                     </ul>
                 </transition>
             </li>
diff --git a/pages/landing/BlockSection.vue b/pages/landing/BlockSection.vue
index 687060769..82fceaa00 100644
--- a/pages/landing/BlockSection.vue
+++ b/pages/landing/BlockSection.vue
@@ -3,10 +3,10 @@
         <div class="section-header">PrimeBlocks</div>
         <p class="section-detail">350+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
         <div class="flex justify-content-center mt-4">
-            <a href="https://www.primefaces.org/primeblocks-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
+            <nuxt-link to="https://www.primefaces.org/primeblocks-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
                 <span>Learn More</span>
                 <i class="pi pi-arrow-right ml-2"></i>
-            </a>
+            </nuxt-link>
         </div>
         <section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', {'blocks-animation': setAnimation}]">
             <div class="flex">
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 5145c32d3..59890fae5 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -49,10 +49,10 @@
                             </div>
                         </div>
 
-                        <a href="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
+                        <nuxt-link to="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                             <span>View Full Version</span>
                             <i class="pi pi-arrow-right ml-auto"></i>
-                        </a>
+                        </nuxt-link>
                     </div>
                 </div>
                 <div :class="editorclass" style="border-radius: '10px'" :ref="editorRef">
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index f68b0423f..36f83988e 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -13,10 +13,10 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mb-5">Support</li>
                     <li class="mb-4">
-                        <a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
+                        <nuxt-link to="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
+                        <nuxt-link to="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</nuxt-link>
                     </li>
                     <li class="mb-4">
                         <nuxt-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</nuxt-link>
@@ -27,25 +27,25 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
                     <li class="mb-4">
-                        <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
+                        <nuxt-link to="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
+                        <nuxt-link to="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
+                        <nuxt-link to="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
+                        <nuxt-link to="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
+                        <nuxt-link to="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
+                        <nuxt-link to="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
+                        <nuxt-link to="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</nuxt-link>
                     </li>
                 </ul>
             </div>
@@ -56,7 +56,7 @@
                         <nuxt-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</nuxt-link>
                     </li>
                     <li class="mb-4">
-                        <a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
+                        <nuxt-link to="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</nuxt-link>
                     </li>
                     <li class="mb-4">
                         <nuxt-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</nuxt-link>
@@ -72,15 +72,15 @@
                 <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
             </span>
             <div class="flex align-items-center">
-                <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                <nuxt-link to="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
                     <i class="pi pi-twitter"></i>
-                </a>
-                <a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                </nuxt-link>
+                <nuxt-link to="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
                     <i class="pi pi-github"></i>
-                </a>
-                <a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                </nuxt-link>
+                <nuxt-link to="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                     <i class="pi pi-discord"></i>
-                </a>
+                </nuxt-link>
             </div>
         </div>
     </section>
diff --git a/pages/landing/HeaderSection.vue b/pages/landing/HeaderSection.vue
index bd9b85089..6dee5370d 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -14,31 +14,31 @@
                         </nuxt-link>
                     </li>
                     <li class="mr-0 lg:mr-2">
-                        <a href="https://www.primefaces.org/primeblocks-vue">
+                        <nuxt-link to="https://www.primefaces.org/primeblocks-vue">
                             <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
                             <span>Blocks</span>
-                        </a>
+                        </nuxt-link>
                     </li>
                     <li class="mr-0 lg:mr-2">
-                        <a href="https://www.primefaces.org/designer-vue">
+                        <nuxt-link to="https://www.primefaces.org/designer-vue">
                             <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
                             <span>Designer</span>
-                        </a>
+                        </nuxt-link>
                     </li>
                     <li class="mr-0 lg:mr-2">
-                        <a href="https://www.primefaces.org/store/templates.xhtml">
+                        <nuxt-link to="https://www.primefaces.org/store/templates.xhtml">
                             <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
                             <span>Templates</span>
-                        </a>
+                        </nuxt-link>
                     </li>
                 </ol>
             </nav>
-            <a href="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+            <nuxt-link to="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                 <i class="pi pi-github"></i>
-            </a>
-            <a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+            </nuxt-link>
+            <nuxt-link to="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                 <i class="pi pi-discord"></i>
-            </a>
+            </nuxt-link>
             <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
                 <i :class="['pi', {'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme()}]"></i>
             </button>
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index a69b60d59..7e24a7d66 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -3,27 +3,27 @@
             <div class="section-header">Templates</div>
             <p class="section-detail">Professionally designed highly customizable application templates to get started in style.</p>
             <div class="flex justify-content-center mt-4">
-                <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
+                <nuxt-link to="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                     <span>Learn More</span>
                     <i class="pi pi-arrow-right ml-2"></i>
-                </a>
+                </nuxt-link>
             </div>
             <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', {'templates-animation': setAnimation}]">
             <div class="flex">
                 <div class="template-block block-1 mr-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('diamond')}">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/diamond-vue/" >Diamond Preview</a>
+                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/diamond-vue/" >Diamond Preview</nuxt-link>
                 </div>
             <div
             class="template-block block-2 ml-2 flex justify-content-center align-items-center"
                 :style="{backgroundImage: imageBg('freya')}">
-                <a class="templates-btn" target="_blank" href="https://www.primefaces.org/freya-vue/" >Freya Preview</a>
+                <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/freya-vue/" >Freya Preview</nuxt-link>
                 </div>
             </div>
             <div class="flex my-4">
                 <div class="template-block block-3 mr-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('atlantis')}">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/atlantis-vue/" >Atlantis Preview</a>
+                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/atlantis-vue/" >Atlantis Preview</nuxt-link>
                 </div>
                 <div class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column">
                     <img class="img-1"
@@ -31,17 +31,17 @@
                 </div>
                 <div class="template-block block-4 ml-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('apollo')}">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/apollo-vue/" >Apollo Preview</a>
+                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/apollo-vue/" >Apollo Preview</nuxt-link>
                 </div>
             </div>
             <div class="flex">
                 <div class="template-block block-5 mr-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('serenity')}">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/serenity-vue/" >Serenity Preview</a>
+                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/serenity-vue/" >Serenity Preview</nuxt-link>
                 </div>
                 <div class="template-block block-6 ml-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('ultima')}">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/ultima-vue/" >Ultima Preview</a>
+                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/ultima-vue/" >Ultima Preview</nuxt-link>
                 </div>
             </div>
             <div class="lines">
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 2f0cb0ac3..4f674dbef 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -6,7 +6,7 @@
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('lara')}]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('md')}]" @click="changeTheme('md', 'indigo')">Material</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
-            <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
+            <nuxt-link type="button" class="font-medium p-link linkbox mt-4" to="https://www.primefaces.org/designer-vue">more...</nuxt-link>
         </div>
         <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
             <div class="box overflow-hidden z-1 p-5 table-container">
diff --git a/pages/liveeditor/LiveEditor.vue b/pages/liveeditor/LiveEditor.vue
index 669db7f29..3ad504206 100644
--- a/pages/liveeditor/LiveEditor.vue
+++ b/pages/liveeditor/LiveEditor.vue
@@ -109,8 +109,7 @@ export default {
 
             let extIndexCSS = extFiles['index.css'] || '';
             delete extFiles['index.css'];
-
-            console.log(packageJson)
+            
             const dependencies = packageJson ? packageJson.devDependencies : {};
 
             let defaultCss = {
diff --git a/service/NewsService.js b/service/NewsService.js
index 3d6cb9ead..36ec8ec12 100644
--- a/service/NewsService.js
+++ b/service/NewsService.js
@@ -3,7 +3,6 @@ export default class NewsService {
     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)