diff --git a/pages/autocomplete/index.vue b/pages/autocomplete/index.vue
index 83d29c0b6..52e88a181 100755
--- a/pages/autocomplete/index.vue
+++ b/pages/autocomplete/index.vue
@@ -22,7 +22,7 @@
                 <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
                     <template #optiongroup="slotProps">
                         <div class="flex align-items-center country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
                             <div>{{ slotProps.item.label }}</div>
                         </div>
                     </template>
@@ -32,7 +32,7 @@
                 <AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection>
                     <template #item="slotProps">
                         <div class="country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
                             <div>{{ slotProps.item.name }}</div>
                         </div>
                     </template>
diff --git a/pages/button/ButtonDoc.vue b/pages/button/ButtonDoc.vue
index 9b7b5442f..af6dbbbcc 100755
--- a/pages/button/ButtonDoc.vue
+++ b/pages/button/ButtonDoc.vue
@@ -136,11 +136,11 @@ import Button from 'primevue/button';
         <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
         <pre v-code><code>
 &lt;Button type="button" class="px-3"&gt;
-    &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
+    &lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem"/&gt;
 &lt;/Button&gt;
 
 &lt;Button type="button" class="p-button-outlined p-button-success"&gt;
-    &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
+    &lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem" /&gt;
     &lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
 &lt;/Button&gt;
 
diff --git a/pages/cascadeselect/CascadeSelectDoc.vue b/pages/cascadeselect/CascadeSelectDoc.vue
index 12d4c2693..921207df8 100644
--- a/pages/cascadeselect/CascadeSelectDoc.vue
+++ b/pages/cascadeselect/CascadeSelectDoc.vue
@@ -118,7 +118,7 @@ data() &#123;
         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
     &lt;template #option="slotProps"&gt;
         &lt;div class="country-item"&gt;
-            &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
+            &lt;img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
             &lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
             &lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
             &lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;
diff --git a/pages/cascadeselect/index.vue b/pages/cascadeselect/index.vue
index e6bf78bba..8834f1a44 100644
--- a/pages/cascadeselect/index.vue
+++ b/pages/cascadeselect/index.vue
@@ -22,7 +22,7 @@
                 <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
                     <template #option="slotProps">
                         <div class="country-item">
-                            <img v-if="slotProps.option.states" src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
+                            <img v-if="slotProps.option.states" src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
                             <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
                             <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
                             <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
diff --git a/pages/datatable/Filter.vue b/pages/datatable/Filter.vue
index df649558f..6c7b8af25 100755
--- a/pages/datatable/Filter.vue
+++ b/pages/datatable/Filter.vue
@@ -46,7 +46,7 @@
                     </Column>
                     <Column header="Country" filterField="country.name" style="min-width: 12rem">
                         <template #body="{ data }">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -169,7 +169,7 @@
                     </Column>
                     <Column header="Country" filterField="country.name" style="min-width: 12rem">
                         <template #body="{ data }">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
diff --git a/pages/datatable/RowGroup.vue b/pages/datatable/RowGroup.vue
index 0cfd173c3..1462b8283 100755
--- a/pages/datatable/RowGroup.vue
+++ b/pages/datatable/RowGroup.vue
@@ -17,7 +17,7 @@
                     <Column field="name" header="Name" style="min-width: 200px"></Column>
                     <Column field="country" header="Country" style="min-width: 200px">
                         <template #body="slotProps">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                     </Column>
@@ -61,7 +61,7 @@
                     <Column field="name" header="Name"></Column>
                     <Column field="country" header="Country">
                         <template #body="slotProps">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                     </Column>
@@ -100,7 +100,7 @@
                     <Column field="name" header="Name"></Column>
                     <Column field="country" header="Country">
                         <template #body="slotProps">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                     </Column>
diff --git a/pages/datatable/Scroll.vue b/pages/datatable/Scroll.vue
index a152f997b..13944d2a3 100755
--- a/pages/datatable/Scroll.vue
+++ b/pages/datatable/Scroll.vue
@@ -104,7 +104,7 @@
                     <Column field="name" header="Name" style="min-width: 200px"></Column>
                     <Column field="country" header="Country" style="min-width: 200px">
                         <template #body="slotProps">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                     </Column>
diff --git a/pages/datatable/State.vue b/pages/datatable/State.vue
index cb69a7d52..d55821adb 100755
--- a/pages/datatable/State.vue
+++ b/pages/datatable/State.vue
@@ -36,7 +36,7 @@
                     </Column>
                     <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
                         <template #body="slotProps">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                         <template #filter>
@@ -102,7 +102,7 @@
                     </Column>
                     <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
                         <template #body="slotProps">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                         <template #filter>
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index 884ec4e15..cc0afc270 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -54,7 +54,7 @@
                     </Column>
                     <Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index 2cf6ab3d0..dfb6b49f5 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -362,7 +362,7 @@ export default {
         width: 100%;
         height: 450px;
         position: relative;
-        background-image: url('../../assets/images/dock/window.jpg');
+        background-image: url('@/assets/images/dock/window.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         z-index: 1;
diff --git a/pages/dropdown/index.vue b/pages/dropdown/index.vue
index 03cee98da..fa3742402 100755
--- a/pages/dropdown/index.vue
+++ b/pages/dropdown/index.vue
@@ -25,7 +25,7 @@
                 <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
                     <template #optiongroup="slotProps">
                         <div class="flex align-items-center country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
                             <div>{{ slotProps.option.label }}</div>
                         </div>
                     </template>
@@ -35,7 +35,7 @@
                 <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
                     <template #value="slotProps">
                         <div v-if="slotProps.value" class="country-item country-item-value">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
                             <div>{{ slotProps.value.name }}</div>
                         </div>
                         <span v-else>
@@ -44,7 +44,7 @@
                     </template>
                     <template #option="slotProps">
                         <div class="country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
                             <div>{{ slotProps.option.name }}</div>
                         </div>
                     </template>
diff --git a/pages/filterservice/index.vue b/pages/filterservice/index.vue
index 146bfd9dc..d7e26d629 100644
--- a/pages/filterservice/index.vue
+++ b/pages/filterservice/index.vue
@@ -31,7 +31,7 @@
                     </Column>
                     <Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
                         <template #body="{ data }">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 63b4a9573..c67a073ff 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -44,7 +44,7 @@
                     </Column>
                     <Column field="country.name" header="Country" sortable style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                     </Column>
@@ -86,8 +86,8 @@
 </template>
 
 <script>
-import CustomerService from '../../service/CustomerService';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import CustomerService from '../../service/CustomerService';
 
 export default {
     emits: ['table-theme-change'],
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index 3916618b1..21f2c0f2e 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -22,7 +22,7 @@
                 <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width: 15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
                     <template #optiongroup="slotProps">
                         <div class="flex align-items-center country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
                             <div>{{ slotProps.option.label }}</div>
                         </div>
                     </template>
@@ -32,7 +32,7 @@
                 <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width: 15rem" filterPlaceholder="Search">
                     <template #option="slotProps">
                         <div class="country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
                             <div>{{ slotProps.option.name }}</div>
                         </div>
                     </template>
diff --git a/pages/menubar/index.vue b/pages/menubar/index.vue
index f084c5a1b..53f71356a 100755
--- a/pages/menubar/index.vue
+++ b/pages/menubar/index.vue
@@ -17,7 +17,7 @@
             <div class="card">
                 <Menubar :model="items">
                     <template #start>
-                        <img alt="logo" src="../../assets/images/logo.svg" height="40" class="mr-2" />
+                        <img alt="logo" src="@/assets/images/logo.svg" height="40" class="mr-2" />
                     </template>
                     <template #end>
                         <InputText placeholder="Search" type="text" />
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index c654815c7..95d4626c6 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -25,7 +25,7 @@
                 <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
                     <template #optiongroup="slotProps">
                         <div class="flex align-items-center country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
                             <div>{{ slotProps.option.label }}</div>
                         </div>
                     </template>
@@ -35,14 +35,14 @@
                 <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
                     <template #value="slotProps">
                         <div v-for="option of slotProps.value" :key="option.code" class="country-item country-item-value">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
                             <div>{{ option.name }}</div>
                         </div>
                         <template v-if="!slotProps.value || slotProps.value.length === 0"> Select Countries </template>
                     </template>
                     <template #option="slotProps">
                         <div class="country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
+                            <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
                             <div>{{ slotProps.option.name }}</div>
                         </div>
                     </template>
diff --git a/pages/setup/index.vue b/pages/setup/index.vue
index feac821a8..5907b152c 100755
--- a/pages/setup/index.vue
+++ b/pages/setup/index.vue
@@ -332,31 +332,31 @@ app.use(PrimeVue, {
                         <tr>
                             <th>
                                 <div class="flex align-items-center">
-                                    <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
+                                    <img src="@/assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
                                     Edge
                                 </div>
                             </th>
                             <th>
                                 <div class="flex align-items-center">
-                                    <img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
+                                    <img src="@/assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
                                     Firefox
                                 </div>
                             </th>
                             <th>
                                 <div class="flex align-items-center">
-                                    <img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
+                                    <img src="@/assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
                                     Chrome
                                 </div>
                             </th>
                             <th>
                                 <div class="flex align-items-center">
-                                    <img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
+                                    <img src="@/assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
                                     Safari
                                 </div>
                             </th>
                             <th>
                                 <div class="flex align-items-center">
-                                    <img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
+                                    <img src="@/assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
                                     Opera
                                 </div>
                             </th>
diff --git a/pages/splitbutton/SplitButtonDoc.vue b/pages/splitbutton/SplitButtonDoc.vue
index bad3142f2..5bac82abc 100755
--- a/pages/splitbutton/SplitButtonDoc.vue
+++ b/pages/splitbutton/SplitButtonDoc.vue
@@ -96,7 +96,7 @@ export default {
         <pre v-code><code>
 &lt;SplitButton :model="items" class="bg-primary border-round"&gt;
     &lt;Button @click="save"&gt;
-        &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /&gt;
+        &lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" /&gt;
         &lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
     &lt;/Button&gt;
 &lt;/SplitButton&gt;
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index 24d891738..3c24aa7c5 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -83,7 +83,7 @@
                 <h5>Templating</h5>
                 <SplitButton :model="items" class="bg-primary border-round">
                     <Button @click="save">
-                        <img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" />
+                        <img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" />
                         <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
                     </Button>
                 </SplitButton>
diff --git a/pages/theming/index.vue b/pages/theming/index.vue
index 705c35481..3eeda7045 100755
--- a/pages/theming/index.vue
+++ b/pages/theming/index.vue
@@ -10,7 +10,7 @@
             <p>Choose from a variety of themes or develop your own theme easily.</p>
 
             <h5>Architecture</h5>
-            <img alt="Architecture" src="../../assets/images/architecture.jpg" class="architecture-image" />
+            <img alt="Architecture" src="@/assets/images/architecture.jpg" class="architecture-image" />
             <p>
                 PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into core and theme. Core resides inside
                 PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings and margins.
@@ -45,7 +45,7 @@
             </div>
 
             <a href="http://www.primefaces.org/designer/primevue" class="designer-image">
-                <img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" />
+                <img alt="PrimeVue Designer" src="@/assets/images/primevue-designer.jpg" style="width: 100%" />
             </a>
 
             <h5>Scaling</h5>