From bbcebb99c5c6c0e4e34b78c83c7074f472accbb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Tue, 29 Nov 2022 13:46:18 +0300
Subject: [PATCH] ContextPath added to dynamic urls and services

---
 src/layout/AppFooter.vue              |   5 +-
 src/layout/AppTopbar.vue              |   4 +-
 src/layout/composables/layout.js      |  10 +-
 src/layout/service/CountryService.js  |   9 +-
 src/layout/service/CustomerService.js |  39 +++----
 src/layout/service/NodeService.js     |  17 ++--
 src/layout/service/PhotoService.js    |   9 +-
 src/layout/service/ProductService.js  |  26 ++---
 src/router/index.js                   |   4 +-
 src/views/Dashboard.vue               |   4 +-
 src/views/pages/Crud.vue              |   6 +-
 src/views/pages/Landing.vue           |   4 +-
 src/views/pages/Timeline.vue          |   5 +-
 src/views/pages/auth/Login.vue        |   4 +-
 src/views/uikit/Icons.vue             | 141 --------------------------
 src/views/uikit/List.vue              |   7 +-
 src/views/uikit/Media.vue             |   9 +-
 src/views/uikit/Overlay.vue           |   5 +-
 src/views/uikit/Table.vue             |  13 ++-
 src/views/utilities/Icons.vue         |   5 +-
 vite.config.js                        |  15 +--
 21 files changed, 115 insertions(+), 226 deletions(-)
 delete mode 100644 src/views/uikit/Icons.vue

diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index b061bce..f65a47d 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -2,12 +2,11 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed } from 'vue';
 
-const { layoutConfig } = useLayout();
+const { layoutConfig, contextPath } = useLayout();
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
-
 </script>
 
 <template>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index fa1945a..15492fc 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useLayout } from '@/layout/composables/layout';
 import { useRouter } from 'vue-router';
 
-const { layoutConfig, onMenuToggle } = useLayout();
+const { layoutConfig, onMenuToggle, contextPath } = useLayout();
 
 const outsideClickListener = ref(null);
 const topbarMenuActive = ref(false);
@@ -18,7 +18,7 @@ onBeforeUnmount(() => {
 });
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 
 const onTopBarMenuButton = () => {
diff --git a/src/layout/composables/layout.js b/src/layout/composables/layout.js
index a9075cf..501cc21 100644
--- a/src/layout/composables/layout.js
+++ b/src/layout/composables/layout.js
@@ -1,5 +1,7 @@
 import { toRefs, reactive, computed } from 'vue';
 
+const contextPath = import.meta.env.BASE_URL;
+
 const layoutConfig = reactive({
     ripple: false,
     darkTheme: false,
@@ -19,17 +21,17 @@ const layoutState = reactive({
     menuHoverActive: false
 });
 
-export function useLayout () {
+export function useLayout() {
     const changeThemeSettings = (theme, darkTheme) => {
         layoutConfig.darkTheme = darkTheme;
         layoutConfig.theme = theme;
     };
 
-    const setScale = scale => {
+    const setScale = (scale) => {
         layoutConfig.scale = scale;
     };
 
-    const setActiveMenuItem = item => {
+    const setActiveMenuItem = (item) => {
         layoutConfig.activeMenuItem = item.value || item;
     };
 
@@ -49,5 +51,5 @@ export function useLayout () {
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
 
-    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
+    return { contextPath, layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
 }
diff --git a/src/layout/service/CountryService.js b/src/layout/service/CountryService.js
index ab11e88..1eebcfc 100755
--- a/src/layout/service/CountryService.js
+++ b/src/layout/service/CountryService.js
@@ -1,7 +1,8 @@
+const contextPath = import.meta.env.BASE_URL;
 export default class CountryService {
-    getCountries () {
-        return fetch('/demo/data/countries.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getCountries() {
+        return fetch(contextPath + 'demo/data/countries.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 }
diff --git a/src/layout/service/CustomerService.js b/src/layout/service/CustomerService.js
index 1252dd1..67fb7d8 100755
--- a/src/layout/service/CustomerService.js
+++ b/src/layout/service/CustomerService.js
@@ -1,32 +1,33 @@
+const contextPath = import.meta.env.BASE_URL;
 export default class CustomerService {
-    getCustomersSmall () {
-        return fetch('/demo/data/customers-small.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getCustomersSmall() {
+        return fetch(contextPath + 'demo/data/customers-small.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomersMedium () {
-        return fetch('/demo/data/customers-medium.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getCustomersMedium() {
+        return fetch(contextPath + 'demo/data/customers-medium.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomersLarge () {
-        return fetch('/demo/data/customers-large.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getCustomersLarge() {
+        return fetch(contextPath + 'demo/data/customers-large.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomersXLarge () {
-        return fetch('/demo/data/customers-xlarge.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getCustomersXLarge() {
+        return fetch(contextPath + 'demo/data/customers-xlarge.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomers (params) {
+    getCustomers(params) {
         const queryParams = Object.keys(params)
-            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+            .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
             .join('&');
-        return fetch('https://www.primefaces.org//demo/data/customers?' + queryParams).then(res => res.json());
+        return fetch('https://www.primefaces.org//demo/data/customers?' + queryParams).then((res) => res.json());
     }
 }
diff --git a/src/layout/service/NodeService.js b/src/layout/service/NodeService.js
index 636cf23..4295433 100755
--- a/src/layout/service/NodeService.js
+++ b/src/layout/service/NodeService.js
@@ -1,13 +1,14 @@
+const contextPath = import.meta.env.BASE_URL;
 export default class NodeService {
-    getTreeTableNodes () {
-        return fetch('/demo/data/treetablenodes.json')
-            .then(res => res.json())
-            .then(d => d.root);
+    getTreeTableNodes() {
+        return fetch(contextPath + 'demo/data/treetablenodes.json')
+            .then((res) => res.json())
+            .then((d) => d.root);
     }
 
-    getTreeNodes () {
-        return fetch('/demo/data/treenodes.json')
-            .then(res => res.json())
-            .then(d => d.root);
+    getTreeNodes() {
+        return fetch(contextPath + 'demo/data/treenodes.json')
+            .then((res) => res.json())
+            .then((d) => d.root);
     }
 }
diff --git a/src/layout/service/PhotoService.js b/src/layout/service/PhotoService.js
index 7864a15..6ba20da 100644
--- a/src/layout/service/PhotoService.js
+++ b/src/layout/service/PhotoService.js
@@ -1,7 +1,8 @@
+const contextPath = import.meta.env.BASE_URL;
 export default class PhotoService {
-    getImages () {
-        return fetch('/demo/data/photos.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getImages() {
+        return fetch(contextPath + 'demo/data/photos.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 }
diff --git a/src/layout/service/ProductService.js b/src/layout/service/ProductService.js
index b84983c..a6aa978 100644
--- a/src/layout/service/ProductService.js
+++ b/src/layout/service/ProductService.js
@@ -1,19 +1,21 @@
+const contextPath = import.meta.env.BASE_URL;
+
 export default class ProductService {
-    getProductsSmall () {
-        return fetch('/demo/data/products-small.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getProductsSmall() {
+        return fetch(contextPath + 'demo/data/products-small.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getProducts () {
-        return fetch('/demo/data/products.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getProducts() {
+        return fetch(contextPath + 'demo/data/products.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getProductsWithOrdersSmall () {
-        return fetch('/demo/data/products-orders-small.json')
-            .then(res => res.json())
-            .then(d => d.data);
+    getProductsWithOrdersSmall() {
+        return fetch(contextPath + 'demo/data/products-orders-small.json')
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 }
diff --git a/src/router/index.js b/src/router/index.js
index b151b5f..116445d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import AppLayout from '@/layout/AppLayout.vue';
 
 const router = createRouter({
-    history: createWebHistory(import.meta.env.BASE_URL),
+    history: createWebHashHistory(),
     routes: [
         {
             path: '/',
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 20dc864..ee0733f 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -3,7 +3,7 @@ import { onMounted, reactive, ref, watch } from 'vue';
 import ProductService from '@/layout/service/ProductService';
 import { useLayout } from '@/layout/composables/layout';
 
-const { isDarkTheme } = useLayout();
+const { isDarkTheme, contextPath } = useLayout();
 
 const products = ref(null);
 const lineData = reactive({
@@ -184,7 +184,7 @@ watch(
                     <Column style="width: 15%">
                         <template #header> Image </template>
                         <template #body="slotProps">
-                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
+                            <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
                         </template>
                     </Column>
                     <Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index 0f697b7..b46c4c2 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -3,8 +3,10 @@ import { FilterMatchMode } from 'primevue/api';
 import { ref, onMounted, onBeforeMount } from 'vue';
 import ProductService from '@/layout/service/ProductService';
 import { useToast } from 'primevue/usetoast';
+import { useLayout } from '@/layout/composables/layout';
 
 const toast = useToast();
+const { contextPath } = useLayout();
 
 const products = ref(null);
 const productDialog = ref(false);
@@ -181,7 +183,7 @@ const initFilters = () => {
                     <Column header="Image" headerStyle="width:14%; min-width:10rem;">
                         <template #body="slotProps">
                             <span class="p-column-title">Image</span>
-                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
+                            <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
@@ -217,7 +219,7 @@ const initFilters = () => {
                 </DataTable>
 
                 <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-                    <img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
+                    <img :src="contextPath + 'demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
                     <div class="field">
                         <label for="name">Name</label>
                         <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
index e5aeafe..2917098 100644
--- a/src/views/pages/Landing.vue
+++ b/src/views/pages/Landing.vue
@@ -3,7 +3,7 @@ import { useLayout } from '@/layout/composables/layout';
 import { computed } from 'vue';
 import AppConfig from '@/layout/AppConfig.vue';
 
-const { layoutConfig } = useLayout();
+const { layoutConfig, contextPath } = useLayout();
 
 const smoothScroll = (id) => {
     document.querySelector(id).scrollIntoView({
@@ -12,7 +12,7 @@ const smoothScroll = (id) => {
 };
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 
diff --git a/src/views/pages/Timeline.vue b/src/views/pages/Timeline.vue
index b685430..3e69820 100644
--- a/src/views/pages/Timeline.vue
+++ b/src/views/pages/Timeline.vue
@@ -1,5 +1,8 @@
 <script setup>
 import { ref } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+
+const { contextPath } = useLayout();
 
 const customEvents = ref([
     {
@@ -95,7 +98,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
+                        <img v-if="slotProps.item.image" :src="contextPath + 'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index 3cea9a5..bc24986 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -3,13 +3,13 @@ import { useLayout } from '@/layout/composables/layout';
 import { ref, computed } from 'vue';
 import AppConfig from '@/layout/AppConfig.vue';
 
-const { layoutConfig } = useLayout();
+const { layoutConfig, contextPath } = useLayout();
 const email = ref('');
 const password = ref('');
 const checked = ref(false);
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 
diff --git a/src/views/uikit/Icons.vue b/src/views/uikit/Icons.vue
deleted file mode 100644
index ce30f5b..0000000
--- a/src/views/uikit/Icons.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup>
-import { ref, onMounted, computed } from 'vue';
-const icons = ref(null);
-const filter = ref(null);
-
-onMounted(() => {
-    fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
-        .then((res) => res.json())
-        .then((d) => {
-            let icons = d.icons;
-            let data = icons.filter((value) => {
-                return value.icon.tags.indexOf('deprecate') === -1;
-            });
-            data.sort((icon1, icon2) => {
-                if (icon1.properties.name < icon2.properties.name) return -1;
-                else if (icon1.properties.name > icon2.properties.name) return 1;
-                else return 0;
-            });
-
-            icons.value = data;
-        });
-});
-
-const filteredIcons = computed(() => {
-    if (filter.value) {
-        return icons.value.filter((icon) => {
-            return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
-        });
-    } else {
-        return icons.value;
-    }
-});
-</script>
-
-<template>
-    <div>
-        <div class="card">
-            <h3>Icons</h3>
-            <p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr" class="font-medium">PrimeTek</a>.</p>
-
-            <h5>Download</h5>
-            <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
-
-            <pre v-code><code>
-npm install primeicons --save
-
-</code></pre>
-
-            <h5>Getting Started</h5>
-            <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
-
-            <pre v-code><code>
-&lt;i class="pi pi-check"&gt;&lt;/i&gt;
-&lt;i class="pi pi-times"&gt;&lt;/i&gt;
-
-</code></pre>
-
-            <i class="pi pi-check" style="margin-right: 0.5rem"></i>
-            <i class="pi pi-times"></i>
-
-            <h5>Size</h5>
-            <p>Size of the icons can easily be changed using font-size property.</p>
-
-            <pre v-code><code>
-&lt;i class="pi pi-check"&gt;&lt;/i&gt;
-
-</code></pre>
-
-            <i class="pi pi-check"></i>
-
-            <pre v-code><code>
-&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
-
-</code></pre>
-
-            <i class="pi pi-check" style="font-size: 2rem"></i>
-
-            <h5>Spinning Animation</h5>
-            <p>Special pi-spin class applies continuous rotation to an icon.</p>
-            <pre v-code><code>
-&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
-
-</code></pre>
-
-            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
-
-            <h5>Constants</h5>
-            <p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
-            <pre v-code><code>
-&lt;Menu :model="items" /&gt;
-
-</code></pre>
-
-            <pre v-code.script><code>
-import {PrimeIcons} from 'primevue/api';
-
-export default {
-	data() {
-		return {
-			items: [
-				{
-					label: 'Update',
-					icon: PrimeIcons.REFRESH,
-                    to: '/update'
-				},
-				{
-					label: 'Delete',
-					icon: PrimeIcons.TIMES,
-                    to: '/delete'
-				}
-			]
-		}
-	}
-}
-
-</code></pre>
-
-            <h5>List of Icons</h5>
-            <p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium">request new icons</a> at the issue tracker.</p>
-
-            <InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
-
-            <div class="grid icons-list text-center">
-                <div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
-                    <i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
-                    <div>pi-{{ icon.properties.name }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/assets/demo/styles/documentation.scss';
-
-.icons-list {
-    i {
-        color: var(--text-color-secondary);
-    }
-}
-</style>
diff --git a/src/views/uikit/List.vue b/src/views/uikit/List.vue
index 15c35c1..e2083c7 100644
--- a/src/views/uikit/List.vue
+++ b/src/views/uikit/List.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import ProductService from '@/layout/service/ProductService';
+import { useLayout } from '@/layout/composables/layout';
+
+const { contextPath } = useLayout();
 
 const picklistValue = ref([
     [
@@ -76,7 +79,7 @@ const onSortChange = (event) => {
                     <template #list="slotProps">
                         <div class="col-12">
                             <div class="flex flex-column md:flex-row align-items-center p-3 w-full">
-                                <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
+                                <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
                                 <div class="flex-1 text-center md:text-left">
                                     <div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
                                     <div class="mb-3">{{ slotProps.data.description }}</div>
@@ -106,7 +109,7 @@ const onSortChange = (event) => {
                                     <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
                                 </div>
                                 <div class="text-center">
-                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
+                                    <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
                                     <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
                                     <div class="mb-3">{{ slotProps.data.description }}</div>
                                     <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
diff --git a/src/views/uikit/Media.vue b/src/views/uikit/Media.vue
index a0376a4..cf205f4 100644
--- a/src/views/uikit/Media.vue
+++ b/src/views/uikit/Media.vue
@@ -2,6 +2,9 @@
 import ProductService from '@/layout/service/ProductService';
 import PhotoService from '@/layout/service/PhotoService';
 import { ref, onMounted } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+
+const { contextPath } = useLayout();
 
 const products = ref([]);
 const images = ref([]);
@@ -60,7 +63,7 @@ onMounted(() => {
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'/demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
+                                    <img :src="contextPath + 'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">
@@ -86,10 +89,10 @@ onMounted(() => {
                 <h5>Galleria</h5>
                 <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
                     <template #item="slotProps">
-                        <img :src="'/' + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="'/' + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                        <img :src="contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
             </div>
diff --git a/src/views/uikit/Overlay.vue b/src/views/uikit/Overlay.vue
index 0205957..1b53c39 100644
--- a/src/views/uikit/Overlay.vue
+++ b/src/views/uikit/Overlay.vue
@@ -3,6 +3,9 @@ import ProductService from '@/layout/service/ProductService';
 import { ref, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
+import { useLayout } from '@/layout/composables/layout';
+
+const { contextPath } = useLayout();
 
 const display = ref(false);
 const displayConfirmation = ref(false);
@@ -105,7 +108,7 @@ const confirm = (event) => {
                                 <Column field="name" header="Name" :sortable="true" headerStyle="min-width:10rem;"></Column>
                                 <Column header="Image" headerStyle="min-width:10rem;">
                                     <template #body="slotProps">
-                                        <img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
+                                        <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
                                     </template>
                                 </Column>
                                 <Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
diff --git a/src/views/uikit/Table.vue b/src/views/uikit/Table.vue
index f90d157..cbb8c37 100644
--- a/src/views/uikit/Table.vue
+++ b/src/views/uikit/Table.vue
@@ -3,6 +3,9 @@ import { FilterMatchMode, FilterOperator } from 'primevue/api';
 import CustomerService from '@/layout/service/CustomerService';
 import ProductService from '@/layout/service/ProductService';
 import { ref, onBeforeMount } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+
+const { contextPath } = useLayout();
 
 const customer1 = ref(null);
 const customer2 = ref(null);
@@ -147,7 +150,7 @@ const calculateCustomerTotal = (name) => {
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -155,7 +158,7 @@ const calculateCustomerTotal = (name) => {
                             <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="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -242,7 +245,7 @@ const calculateCustomerTotal = (name) => {
                     <Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
                     <Column field="representative.name" header="Representative" :style="{ width: '200px' }">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
                         </template>
                     </Column>
@@ -273,7 +276,7 @@ const calculateCustomerTotal = (name) => {
                     </Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
+                            <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true">
@@ -357,7 +360,7 @@ const calculateCustomerTotal = (name) => {
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
diff --git a/src/views/utilities/Icons.vue b/src/views/utilities/Icons.vue
index 9633a34..4a90326 100644
--- a/src/views/utilities/Icons.vue
+++ b/src/views/utilities/Icons.vue
@@ -1,5 +1,8 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+
+const { contextPath } = useLayout();
 
 const icons = ref(null);
 const filter = ref(null);
@@ -10,7 +13,7 @@ const filteredIcons = computed(() => {
 });
 
 onMounted(() => {
-    fetch('data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+    fetch(contextPath + 'data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
         .then((res) => res.json())
         .then((d) => {
             let icons = d.icons;
diff --git a/vite.config.js b/vite.config.js
index d883b33..acac2cc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,11 +4,14 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue()],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({ command }) => {
+    return {
+        plugins: [vue()],
+        base: command === 'serve' ? '' : '/sakai-vue/',
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
         }
-    }
+    };
 });