From 06df25c7cc94c7f4be5ed0bc424cdb199199f565 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 27 Dec 2022 23:54:26 +0300
Subject: [PATCH] Removed code duplication and get baseURL from nuxt runtime

---
 layouts/AppMenu.vue             |  5 +-
 layouts/AppTopBar.vue           | 85 ++++++++++++++++-----------------
 nuxt.config.js                  |  7 ++-
 pages/avatar/index.vue          | 23 ++++-----
 pages/carousel/index.vue        |  9 ++--
 pages/chip/index.vue            | 17 +++----
 pages/datatable/Crud.vue        |  5 +-
 pages/datatable/Filter.vue      | 11 ++---
 pages/datatable/RowExpand.vue   |  5 +-
 pages/datatable/RowGroup.vue    |  9 ++--
 pages/datatable/Scroll.vue      |  5 +-
 pages/datatable/State.vue       | 11 ++---
 pages/datatable/Templating.vue  |  5 +-
 pages/datatable/index.vue       |  7 ++-
 pages/galleria/Advanced.vue     |  7 ++-
 pages/galleria/AutoPlay.vue     |  7 ++-
 pages/galleria/Caption.vue      |  7 ++-
 pages/galleria/FullScreen.vue   | 17 ++++---
 pages/galleria/Indicator.vue    | 17 ++++---
 pages/galleria/Navigator.vue    | 19 ++++----
 pages/galleria/Programmatic.vue |  7 ++-
 pages/galleria/Responsive.vue   |  7 ++-
 pages/galleria/Thumbnail.vue    | 19 ++++----
 pages/galleria/index.vue        |  7 ++-
 pages/image/index.vue           | 10 +---
 pages/landing/FooterSection.vue | 10 +---
 pages/landing/HeaderSection.vue |  5 +-
 public/demo/data/photos.json    | 60 +++++++++++------------
 service/CountryService.js       |  6 +--
 service/CustomerService.js      | 15 +++---
 service/EventService.js         |  6 +--
 service/NodeService.js          | 11 +++--
 service/PhotoService.js         |  6 +--
 service/ProductService.js       | 12 +++--
 34 files changed, 215 insertions(+), 244 deletions(-)

diff --git a/layouts/AppMenu.vue b/layouts/AppMenu.vue
index bb7d50116..f51e9f21a 100755
--- a/layouts/AppMenu.vue
+++ b/layouts/AppMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['layout-sidebar', { active: active }]">
         <router-link to="/" class="logo">
-            <img :src="baseUrl + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+            <img :src="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
         </router-link>
         <div class="layout-sidebar-filter p-fluid">
             <AutoComplete
@@ -79,8 +79,7 @@ export default {
             menu: menudata.data,
             filteredRoutes: null,
             selectedRoute: null,
-            routes: [],
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            routes: []
         };
     },
     mounted() {
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index ed625d9e0..c160c183d 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -4,7 +4,7 @@
             <i class="pi pi-bars"></i>
         </a>
         <div v-tooltip.bottom="$appState.theme" class="app-theme">
-            <img :src="baseUrl + 'demo/images/themes/' + logoMap[$appState.theme]" />
+            <img :src="$config.public.contextPath + 'demo/images/themes/' + logoMap[$appState.theme]" />
         </div>
         <ul ref="topbarMenu" class="topbar-menu">
             <li class="topbar-submenu">
@@ -32,138 +32,138 @@
 
                         <li class="topbar-submenu-header">BOOTSTRAP</li>
                         <li>
-                            <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="baseUrl + 'demo/images/themes/bootstrap4-light-blue.svg'" alt="Blue Light" /><span>Blue Light</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/bootstrap4-light-blue.svg'" alt="Blue Light" /><span>Blue Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'bootstrap4-light-purple')"><img :src="baseUrl + 'demo/images/themes/bootstrap4-light-purple.svg'" alt="Purple Light" /><span>Purple Light</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-light-purple')"><img :src="$config.public.contextPath + 'demo/images/themes/bootstrap4-light-purple.svg'" alt="Purple Light" /><span>Purple Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img :src="baseUrl + 'demo/images/themes/bootstrap4-dark-blue.svg'" alt="Blue Dark" /><span>Blue Dark</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img :src="$config.public.contextPath + 'demo/images/themes/bootstrap4-dark-blue.svg'" alt="Blue Dark" /><span>Blue Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img :src="baseUrl + 'demo/images/themes/bootstrap4-dark-purple.svg'" alt="Purple Dark" /><span>Purple Dark</span></a>
+                            <a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/bootstrap4-dark-purple.svg'" alt="Purple Dark" /><span>Purple Dark</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">MATERIAL DESIGN</li>
                         <li>
-                            <a @click="changeTheme($event, 'md-light-indigo')"><img :src="baseUrl + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
+                            <a @click="changeTheme($event, 'md-light-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'md-light-deeppurple')"><img :src="baseUrl + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
+                            <a @click="changeTheme($event, 'md-light-deeppurple')"><img :src="$config.public.contextPath + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'md-dark-indigo', true)"><img :src="baseUrl + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
+                            <a @click="changeTheme($event, 'md-dark-indigo', true)"><img :src="$config.public.contextPath + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img :src="baseUrl + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
+                            <a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
                         <li>
-                            <a @click="changeTheme($event, 'mdc-light-indigo')"><img :src="baseUrl + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
+                            <a @click="changeTheme($event, 'mdc-light-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'mdc-light-deeppurple')"><img :src="baseUrl + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
+                            <a @click="changeTheme($event, 'mdc-light-deeppurple')"><img :src="$config.public.contextPath + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img :src="baseUrl + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
+                            <a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img :src="$config.public.contextPath + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img :src="baseUrl + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
+                            <a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">TAILWIND</li>
                         <li>
-                            <a @click="changeTheme($event, 'tailwind-light')"><img :src="baseUrl + 'demo/images/themes/tailwind-light.png'" alt="Tailwind Light" /><span>Tailwind Light</span></a>
+                            <a @click="changeTheme($event, 'tailwind-light')"><img :src="$config.public.contextPath + 'demo/images/themes/tailwind-light.png'" alt="Tailwind Light" /><span>Tailwind Light</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">FLUENT UI</li>
                         <li>
-                            <a @click="changeTheme($event, 'fluent-light')"><img :src="baseUrl + 'demo/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
+                            <a @click="changeTheme($event, 'fluent-light')"><img :src="$config.public.contextPath + 'demo/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
                         </li>
 
                         <li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-light-indigo')"><img :src="baseUrl + 'demo/images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
+                            <a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-light-blue')"><img :src="baseUrl + 'demo/images/themes/lara-light-blue.png'" alt="Lara Light Blue" /><span>Lara Light Blue</span></a>
+                            <a @click="changeTheme($event, 'lara-light-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-blue.png'" alt="Lara Light Blue" /><span>Lara Light Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-light-purple')"><img :src="baseUrl + 'demo/images/themes/lara-light-purple.png'" alt="Lara Light Purple" /><span>Lara Light Purple</span></a>
+                            <a @click="changeTheme($event, 'lara-light-purple')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-purple.png'" alt="Lara Light Purple" /><span>Lara Light Purple</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-light-teal')"><img :src="baseUrl + 'demo/images/themes/lara-light-teal.png'" alt="Lara Light Teal" /><span>Lara Light Teal</span></a>
+                            <a @click="changeTheme($event, 'lara-light-teal')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-teal.png'" alt="Lara Light Teal" /><span>Lara Light Teal</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-dark-blue')"><img :src="baseUrl + 'demo/images/themes/lara-dark-blue.png'" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-dark-blue.png'" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-dark-indigo')"><img :src="baseUrl + 'demo/images/themes/lara-dark-indigo.png'" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-dark-indigo.png'" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-dark-purple')"><img :src="baseUrl + 'demo/images/themes/lara-dark-purple.png'" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-purple')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-dark-purple.png'" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'lara-dark-teal')"><img :src="baseUrl + 'demo/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
+                            <a @click="changeTheme($event, 'lara-dark-teal')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">PRIMEONE 2021</li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-blue')"><img :src="baseUrl + 'demo/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
+                            <a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-green')"><img :src="baseUrl + 'demo/images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a>
+                            <a @click="changeTheme($event, 'saga-green')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-orange')"><img :src="baseUrl + 'demo/images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a>
+                            <a @click="changeTheme($event, 'saga-orange')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'saga-purple')"><img :src="baseUrl + 'demo/images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a>
+                            <a @click="changeTheme($event, 'saga-purple')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-blue', true)"><img :src="baseUrl + 'demo/images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a>
+                            <a @click="changeTheme($event, 'vela-blue', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-green', true)"><img :src="baseUrl + 'demo/images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a>
+                            <a @click="changeTheme($event, 'vela-green', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-orange', true)"><img :src="baseUrl + 'demo/images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a>
+                            <a @click="changeTheme($event, 'vela-orange', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'vela-purple', true)"><img :src="baseUrl + 'demo/images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a>
+                            <a @click="changeTheme($event, 'vela-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-blue', true)"><img :src="baseUrl + 'demo/images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a>
+                            <a @click="changeTheme($event, 'arya-blue', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-green', true)"><img :src="baseUrl + 'demo/images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a>
+                            <a @click="changeTheme($event, 'arya-green', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-orange', true)"><img :src="baseUrl + 'demo/images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a>
+                            <a @click="changeTheme($event, 'arya-orange', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'arya-purple', true)"><img :src="baseUrl + 'demo/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
+                            <a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
                         </li>
 
                         <li class="topbar-submenu-header">PREMIUM</li>
                         <li>
-                            <a @click="changeTheme($event, 'soho-light')"><img :src="baseUrl + 'demo/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
+                            <a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'demo/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'soho-dark', true)"><img :src="baseUrl + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
+                            <a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'viva-light')"><img :src="baseUrl + 'demo/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
+                            <a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + 'demo/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'viva-dark', true)"><img :src="baseUrl + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
+                            <a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'mira')"><img :src="baseUrl + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
+                            <a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
                         </li>
                         <li>
-                            <a @click="changeTheme($event, 'nano')"><img :src="baseUrl + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
+                            <a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
                         </li>
                     </ul>
                 </transition>
@@ -299,8 +299,7 @@ export default {
                 'lara-light-purple': 'lara-light-purple.png',
                 'lara-light-teal': 'lara-light-teal.png',
                 'lara-light-blue': 'lara-light-blue.png'
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     watch: {
diff --git a/nuxt.config.js b/nuxt.config.js
index 0f620662d..f6590370c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,7 +1,7 @@
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
 import path from 'path';
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
+const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue/' : '/';
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -63,6 +63,11 @@ export default defineNuxtConfig({
             ]
         }
     },
+    runtimeConfig: {
+        public: {
+            contextPath: baseUrl
+        }
+    },
     css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css'],
     vite: {
         plugins: [vueJsx()],
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index bfc18a94d..72083510f 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -72,9 +72,9 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image</h5>
-                        <Avatar :image="baseUrl + 'demo/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
-                        <Avatar :image="baseUrl + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
-                        <Avatar :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
+                        <Avatar :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
+                        <Avatar :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
                     </div>
                 </div>
 
@@ -82,11 +82,11 @@
                     <div class="card">
                         <h5>Avatar Group</h5>
                         <AvatarGroup class="mb-3">
-                            <Avatar :image="baseUrl + 'demo/images/avatar/amyelsner.png'" size="large" shape="circle" />
-                            <Avatar :image="baseUrl + 'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle" />
-                            <Avatar :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" size="large" shape="circle" />
-                            <Avatar :image="baseUrl + 'demo/images/avatar/ionibowcher.png'" size="large" shape="circle" />
-                            <Avatar :image="baseUrl + 'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle" />
+                            <Avatar :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" size="large" shape="circle" />
+                            <Avatar :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle" />
+                            <Avatar :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" size="large" shape="circle" />
+                            <Avatar :image="$config.public.contextPath + 'demo/images/avatar/ionibowcher.png'" size="large" shape="circle" />
+                            <Avatar :image="$config.public.contextPath + 'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle" />
                             <Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" />
                         </AvatarGroup>
                     </div>
@@ -95,7 +95,7 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
-                        <Avatar v-badge.danger="4" :image="baseUrl + 'demo/images/organization/walter.jpg'" size="xlarge" />
+                        <Avatar v-badge.danger="4" :image="$config.public.contextPath + 'demo/images/organization/walter.jpg'" size="xlarge" />
                     </div>
                 </div>
             </div>
@@ -109,11 +109,6 @@
 import AvatarDoc from './AvatarDoc';
 
 export default {
-    data() {
-        return {
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
-        };
-    },
     components: {
         AvatarDoc: AvatarDoc
     }
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index d8325fc45..3ec97c745 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -23,7 +23,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -50,7 +50,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -77,7 +77,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -124,8 +124,7 @@ export default {
                     numVisible: 1,
                     numScroll: 1
                 }
-            ],
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            ]
         };
     },
     productService: null,
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index f4cb1ad8e..e041b8328 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -33,18 +33,18 @@
 
                 <h5>Image</h5>
                 <div class="flex align-items-center">
-                    <Chip label="Amy Elsner" :image="baseUrl + 'demo/images/avatar/amyelsner.png'" class="mr-2" />
-                    <Chip label="Asiya Javayant" :image="baseUrl + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" />
-                    <Chip label="Onyama Limba" :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" class="mr-2" />
-                    <Chip label="Xuxue Feng" :image="baseUrl + 'demo/images/avatar/xuxuefeng.png'" removable />
+                    <Chip label="Amy Elsner" :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" class="mr-2" />
+                    <Chip label="Asiya Javayant" :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" />
+                    <Chip label="Onyama Limba" :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2" />
+                    <Chip label="Xuxue Feng" :image="$config.public.contextPath + 'demo/images/avatar/xuxuefeng.png'" removable />
                 </div>
 
                 <h5>Styling</h5>
                 <div class="flex align-items-center">
                     <Chip label="Action" class="mr-2 custom-chip" />
                     <Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
-                    <Chip label="Onyama Limba" :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
-                    <Chip label="Xuxue Feng" :image="baseUrl + 'demo/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
+                    <Chip label="Onyama Limba" :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
+                    <Chip label="Xuxue Feng" :image="$config.public.contextPath + 'demo/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
                 </div>
             </div>
         </div>
@@ -57,11 +57,6 @@
 import ChipDoc from './ChipDoc';
 
 export default {
-    data() {
-        return {
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
-        };
-    },
     components: {
         ChipDoc: ChipDoc
     }
diff --git a/pages/datatable/Crud.vue b/pages/datatable/Crud.vue
index 61da60550..edd3b233a 100755
--- a/pages/datatable/Crud.vue
+++ b/pages/datatable/Crud.vue
@@ -50,7 +50,7 @@
                     <Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@@ -1170,8 +1170,7 @@ export default {
         </style>
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     productService: null,
diff --git a/pages/datatable/Filter.vue b/pages/datatable/Filter.vue
index 101024ff6..c2ecd0a85 100755
--- a/pages/datatable/Filter.vue
+++ b/pages/datatable/Filter.vue
@@ -64,7 +64,7 @@
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="baseUrl + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -72,7 +72,7 @@
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -178,14 +178,14 @@
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="baseUrl + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
                             <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -1315,8 +1315,7 @@ export default {
         </style>
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     created() {
diff --git a/pages/datatable/RowExpand.vue b/pages/datatable/RowExpand.vue
index ced026f51..a8f66eb39 100755
--- a/pages/datatable/RowExpand.vue
+++ b/pages/datatable/RowExpand.vue
@@ -21,7 +21,7 @@
                     <Column field="name" header="Name" sortable></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" sortable>
@@ -450,8 +450,7 @@ export default {
         </style>                    
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     productService: null,
diff --git a/pages/datatable/RowGroup.vue b/pages/datatable/RowGroup.vue
index 3bb32d625..c3fd1e674 100755
--- a/pages/datatable/RowGroup.vue
+++ b/pages/datatable/RowGroup.vue
@@ -29,7 +29,7 @@
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -73,7 +73,7 @@
                     </Column>
                     <Column field="date" header="Date"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -93,7 +93,7 @@
                     </Column>
                     <Column field="representative.name" header="Representative">
                         <template #body="slotProps">
-                            <img :alt="baseUrl + slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="$config.public.contextPath + slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                     </Column>
@@ -631,8 +631,7 @@ export default {
     </style>                    
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     customerService: null,
diff --git a/pages/datatable/Scroll.vue b/pages/datatable/Scroll.vue
index 63867724a..81d04299c 100755
--- a/pages/datatable/Scroll.vue
+++ b/pages/datatable/Scroll.vue
@@ -116,7 +116,7 @@
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -825,8 +825,7 @@ export default {
         </style>
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     customerService: null,
diff --git a/pages/datatable/State.vue b/pages/datatable/State.vue
index 35b7564b9..1a86e46ee 100755
--- a/pages/datatable/State.vue
+++ b/pages/datatable/State.vue
@@ -45,14 +45,14 @@
                     </Column>
                     <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                         <template #filter>
                             <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -111,14 +111,14 @@
                     </Column>
                     <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                         <template #filter>
                             <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -694,8 +694,7 @@ export default {
         <\\/script>                  
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     customerService: null,
diff --git a/pages/datatable/Templating.vue b/pages/datatable/Templating.vue
index 2177daede..844ba2578 100755
--- a/pages/datatable/Templating.vue
+++ b/pages/datatable/Templating.vue
@@ -20,7 +20,7 @@
                     <Column field="name" header="Name"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price">
@@ -295,8 +295,7 @@ export default {
     </style>                    
 `
                 }
-            },
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            }
         };
     },
     productService: null,
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index b4dc4991d..c835cc290 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -63,7 +63,7 @@
                     </Column>
                     <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="baseUrl + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -71,7 +71,7 @@
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -168,8 +168,7 @@ export default {
                 { name: 'Stephen Shaw', image: 'stephenshaw.png' },
                 { name: 'XuXue Feng', image: 'xuxuefeng.png' }
             ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
         };
     },
     created() {
diff --git a/pages/galleria/Advanced.vue b/pages/galleria/Advanced.vue
index 43d333334..368449eec 100644
--- a/pages/galleria/Advanced.vue
+++ b/pages/galleria/Advanced.vue
@@ -24,11 +24,11 @@
                     :transitionInterval="3000"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
                     </template>
                     <template #thumbnail="slotProps">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                         </div>
                     </template>
                     <template #footer>
@@ -243,8 +243,7 @@ export default {
             images: null,
             activeIndex: 0,
             showThumbnails: false,
-            fullScreen: false,
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            fullScreen: false
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/AutoPlay.vue b/pages/galleria/AutoPlay.vue
index 207598693..1813f41d6 100755
--- a/pages/galleria/AutoPlay.vue
+++ b/pages/galleria/AutoPlay.vue
@@ -11,10 +11,10 @@
             <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -95,8 +95,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/Caption.vue b/pages/galleria/Caption.vue
index a882ab73c..dc8bb8566 100755
--- a/pages/galleria/Caption.vue
+++ b/pages/galleria/Caption.vue
@@ -11,11 +11,11 @@
             <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="{ item }">
-                        <img :src="baseUrl + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="{ item }">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="baseUrl + item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
+                            <img :src="$config.public.contextPath + item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
                         </div>
                     </template>
                     <template #caption="{ item }">
@@ -106,8 +106,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/FullScreen.vue b/pages/galleria/FullScreen.vue
index 6a61a9e84..16e521562 100755
--- a/pages/galleria/FullScreen.vue
+++ b/pages/galleria/FullScreen.vue
@@ -12,10 +12,10 @@
                 <h5>With Thumbnails</h5>
                 <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
 
@@ -26,10 +26,10 @@
                 <h5>Without Thumbnails</h5>
                 <Galleria v-model:visible="displayBasic2" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
 
@@ -51,16 +51,16 @@
                     :showThumbnails="false"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
 
                 <div v-if="images" class="grid" style="max-width: 400px">
                     <div v-for="(image, index) of images" :key="index" class="col-3">
-                        <img :src="baseUrl + image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+                        <img :src="$config.public.contextPath + image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
                     </div>
                 </div>
             </div>
@@ -224,8 +224,7 @@ export default {
             ],
             displayBasic: false,
             displayBasic2: false,
-            displayCustom: false,
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            displayCustom: false
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/Indicator.vue b/pages/galleria/Indicator.vue
index ef0ae938a..f91a495e7 100755
--- a/pages/galleria/Indicator.vue
+++ b/pages/galleria/Indicator.vue
@@ -12,7 +12,7 @@
                 <h5>Indicators with Click Event</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -21,7 +21,7 @@
                 <h5>Indicators with Hover Event</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -30,7 +30,7 @@
                 <h5>Inside Content</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -49,7 +49,7 @@
                     indicatorsPosition="top"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -68,7 +68,7 @@
                     indicatorsPosition="left"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -87,7 +87,7 @@
                     indicatorsPosition="right"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -107,7 +107,7 @@
                     indicatorsPosition="left"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #indicator="{ index }">
                         <span class="indicator-text">
@@ -265,8 +265,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/Navigator.vue b/pages/galleria/Navigator.vue
index 5b10a7d71..21901be1c 100755
--- a/pages/galleria/Navigator.vue
+++ b/pages/galleria/Navigator.vue
@@ -12,10 +12,10 @@
                 <h5>Item Navigators and Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -24,10 +24,10 @@
                 <h5>Item Navigators without Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -36,10 +36,10 @@
                 <h5>Item Navigators on Hover</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -58,10 +58,10 @@
                     :showIndicators="true"
                 >
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -176,8 +176,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/Programmatic.vue b/pages/galleria/Programmatic.vue
index 6687f06c6..23c194dce 100644
--- a/pages/galleria/Programmatic.vue
+++ b/pages/galleria/Programmatic.vue
@@ -16,10 +16,10 @@
 
                 <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
                     </template>
                 </Galleria>
             </div>
@@ -114,8 +114,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/Responsive.vue b/pages/galleria/Responsive.vue
index 152c06766..3e820f212 100755
--- a/pages/galleria/Responsive.vue
+++ b/pages/galleria/Responsive.vue
@@ -11,10 +11,10 @@
             <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -102,8 +102,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/Thumbnail.vue b/pages/galleria/Thumbnail.vue
index 369fcc507..bf48e2a5c 100755
--- a/pages/galleria/Thumbnail.vue
+++ b/pages/galleria/Thumbnail.vue
@@ -12,10 +12,10 @@
                 <h5>Positioned at Bottom</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
             </div>
@@ -24,11 +24,11 @@
                 <h5>Positioned at Left</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                         </div>
                     </template>
                 </Galleria>
@@ -38,11 +38,11 @@
                 <h5>Positioned at Right</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                         </div>
                     </template>
                 </Galleria>
@@ -52,10 +52,10 @@
                 <h5>Positioned at Top</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
             </div>
@@ -190,8 +190,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index 67a18e289..fa293d34f 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -17,10 +17,10 @@
                 <div class="card">
                     <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                         <template #item="slotProps">
-                            <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                            <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                         </template>
                         <template #thumbnail="slotProps">
-                            <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
                         </template>
                     </Galleria>
                 </div>
@@ -52,8 +52,7 @@ export default {
                     breakpoint: '560px',
                     numVisible: 1
                 }
-            ],
-            baseUrl: process.dev ? '' : '/primevue-nuxt'
+            ]
         };
     },
     galleriaService: null,
diff --git a/pages/image/index.vue b/pages/image/index.vue
index 76a4442e4..f8f351b44 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -16,10 +16,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <Image :src="baseUrl + 'demo/images/galleria/galleria1.jpg'" alt="Image" width="250" />
+                <Image :src="$config.public.contextPath + 'demo/images/galleria/galleria1.jpg'" alt="Image" width="250" />
 
                 <h5>Preview</h5>
-                <Image :src="baseUrl + 'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
+                <Image :src="$config.public.contextPath + 'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
             </div>
         </div>
 
@@ -31,12 +31,6 @@
 import ImageDoc from './ImageDoc';
 
 export default {
-    data() {
-        return {
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
-        };
-    },
-
     components: {
         ImageDoc: ImageDoc
     }
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index eeb50ea19..ba094b64d 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -69,7 +69,7 @@
 
         <div class="flex justify-content-between py-6">
             <span>
-                <img :src="baseUrl + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+                <img :src="$config.public.contextPath + '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">
@@ -87,11 +87,5 @@
 </template>
 
 <script>
-export default {
-    data() {
-        return {
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
-        };
-    }
-};
+export default {}
 </script>
diff --git a/pages/landing/HeaderSection.vue b/pages/landing/HeaderSection.vue
index 8bb8addb6..d667fc733 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -1,7 +1,7 @@
 <template>
     <section :ref="containerRef" :class="['landing-header pad-section', { 'landing-header-active': menuActive }]">
         <span>
-            <img :src="baseUrl + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
+            <img :src="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
         </span>
 
         <div class="flex align-items-center">
@@ -54,8 +54,7 @@ export default {
     emits: ['theme-toggle'],
     data() {
         return {
-            menuActive: false,
-            baseUrl: process.dev ? '/' : '/primevue-nuxt/'
+            menuActive: false
         };
     },
     scrollListener: null,
diff --git a/public/demo/data/photos.json b/public/demo/data/photos.json
index bbac63377..410dda36b 100644
--- a/public/demo/data/photos.json
+++ b/public/demo/data/photos.json
@@ -1,92 +1,92 @@
 {
     "data":[
         {
-            "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
             "alt": "Description for Image 1",
             "title": "Title 1"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
             "alt": "Description for Image 2",
             "title": "Title 2"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
             "alt": "Description for Image 3",
             "title": "Title 3"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
             "alt": "Description for Image 4",
             "title": "Title 4"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
             "alt": "Description for Image 5",
             "title": "Title 5"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
             "alt": "Description for Image 6",
             "title": "Title 6"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
             "alt": "Description for Image 7",
             "title": "Title 7"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
             "alt": "Description for Image 8",
             "title": "Title 8"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
             "alt": "Description for Image 9",
             "title": "Title 9"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
             "alt": "Description for Image 10",
             "title": "Title 10"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
             "alt": "Description for Image 11",
             "title": "Title 11"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
             "alt": "Description for Image 12",
             "title": "Title 12"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
             "alt": "Description for Image 13",
             "title": "Title 13"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
             "alt": "Description for Image 14",
             "title": "Title 14"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
             "alt": "Description for Image 15",
             "title": "Title 15"
         }
diff --git a/service/CountryService.js b/service/CountryService.js
index 43198320a..100bee104 100755
--- a/service/CountryService.js
+++ b/service/CountryService.js
@@ -1,8 +1,8 @@
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
-
 export default class CountryService {
     getCountries() {
-        return fetch(baseUrl + 'demo/data/countries.json')
+        const runtimeConfig = useRuntimeConfig();
+
+        return fetch(runtimeConfig.public.contextPath + 'demo/data/countries.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/service/CustomerService.js b/service/CustomerService.js
index 27a74f40e..9721eb3f5 100755
--- a/service/CustomerService.js
+++ b/service/CustomerService.js
@@ -1,26 +1,29 @@
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
-
 export default class CustomerService {
+    constructor() {
+        const runtimeConfig = useRuntimeConfig();
+        this.contextPath = runtimeConfig.public.contextPath;
+    }
+
     getCustomersSmall() {
-        return fetch(baseUrl + 'demo/data/customers-small.json')
+        return fetch(this.contextPath + 'demo/data/customers-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersMedium() {
-        return fetch(baseUrl + 'demo/data/customers-medium.json')
+        return fetch(this.contextPath + 'demo/data/customers-medium.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersLarge() {
-        return fetch(baseUrl + 'demo/data/customers-large.json')
+        return fetch(this.contextPath + 'demo/data/customers-large.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersXLarge() {
-        return fetch(baseUrl + 'demo/data/customers-xlarge.json')
+        return fetch(this.contextPath + 'demo/data/customers-xlarge.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/service/EventService.js b/service/EventService.js
index 92b23d1e2..d34680656 100755
--- a/service/EventService.js
+++ b/service/EventService.js
@@ -1,8 +1,8 @@
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
-
 export default class EventService {
     getEvents() {
-        return fetch(baseUrl + 'demo/data/events.json')
+        const runtimeConfig = useRuntimeConfig();
+
+        return fetch(runtimeConfig.public.contextPath + 'demo/data/events.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/service/NodeService.js b/service/NodeService.js
index 24f04fe39..a1f6c01ed 100755
--- a/service/NodeService.js
+++ b/service/NodeService.js
@@ -1,14 +1,17 @@
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
-
 export default class NodeService {
+    constructor() {
+        const runtimeConfig = useRuntimeConfig();
+        this.contextPath = runtimeConfig.public.contextPath;
+    }
+
     getTreeTableNodes() {
-        return fetch(baseUrl + 'demo/data/treetablenodes.json')
+        return fetch(this.contextPath + 'demo/data/treetablenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }
 
     getTreeNodes() {
-        return fetch(baseUrl + 'demo/data/treenodes.json')
+        return fetch(this.contextPath + 'demo/data/treenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }
diff --git a/service/PhotoService.js b/service/PhotoService.js
index 126d8f6b1..88980ee22 100755
--- a/service/PhotoService.js
+++ b/service/PhotoService.js
@@ -1,8 +1,8 @@
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
-
 export default class PhotoService {
     getImages() {
-        return fetch(baseUrl + 'demo/data/photos.json')
+        const runtimeConfig = useRuntimeConfig();
+
+        return fetch(runtimeConfig.public.contextPath + 'demo/data/photos.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/service/ProductService.js b/service/ProductService.js
index ce9e026c8..cc9154c95 100644
--- a/service/ProductService.js
+++ b/service/ProductService.js
@@ -1,20 +1,24 @@
-const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
 
 export default class ProductService {
+    constructor() {
+        const runtimeConfig = useRuntimeConfig();
+        this.contextPath = runtimeConfig.public.contextPath;
+    }
+
     getProductsSmall() {
-        return fetch(baseUrl + 'demo/data/products-small.json')
+        return fetch(this.contextPath + 'demo/data/products-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProducts() {
-        return fetch(baseUrl + 'demo/data/products-small.json')
+        return fetch(this.contextPath + 'demo/data/products-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProductsWithOrdersSmall() {
-        return fetch(baseUrl + 'demo/data/products-small.json')
+        return fetch(this.contextPath + 'demo/data/products-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }