diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 9f6348dfa..99b726765 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -261,12 +261,7 @@ const classes = {
     inputChip: 'p-autocomplete-input-chip',
     loader: 'p-autocomplete-loader',
     dropdown: 'p-autocomplete-dropdown',
-    panel: ({ instance }) => [
-        'p-autocomplete-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    panel: 'p-autocomplete-overlay p-component',
     list: 'p-autocomplete-list',
     optionGroup: 'p-autocomplete-option-group',
     option: ({ instance, option, i, getItemOptions }) => [
diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 3c1c8cb8f..e558f0181 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -219,10 +219,6 @@ const theme = ({ dt }) => `
     animation: ripple 0.4s linear;
 }
 
-.p-ripple-disabled .p-ink {
-    display: none;
-}
-
 @keyframes ripple {
     100% {
         opacity: 0;
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index a31b125f9..a3f91a1c9 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -1,5 +1,6 @@
 import Base from 'primevue/base';
 import BaseStyle from 'primevue/base/style';
+import PrimeVueService from 'primevue/service';
 import Theme, { ThemeService } from 'primevue/themes';
 import { ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import { mergeProps } from 'vue';
@@ -193,6 +194,18 @@ const BaseDirective = {
             BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
         };
 
+        const handleWatch = (el) => {
+            const watchers = el.$instance?.watch;
+
+            // for 'config'
+            watchers?.['config']?.call(el.$instance, el.$instance?.$config);
+            PrimeVueService.on('config:change', ({ newValue, oldValue }) => watchers?.['config']?.call(el.$instance, newValue, oldValue));
+
+            // for 'config.ripple'
+            watchers?.['config.ripple']?.call(el.$instance, el.$instance?.$config?.ripple);
+            PrimeVueService.on('config:ripple:change', ({ newValue, oldValue }) => watchers?.['config.ripple']?.call(el.$instance, newValue, oldValue));
+        };
+
         return {
             created: (el, binding, vnode, prevVnode) => {
                 handleHook('created', el, binding, vnode, prevVnode);
@@ -201,6 +214,7 @@ const BaseDirective = {
                 el.$attrSelector = UniqueComponentId('pd');
                 BaseDirective._loadStyles(el, binding, vnode);
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
+                handleWatch(el);
             },
             mounted: (el, binding, vnode, prevVnode) => {
                 BaseDirective._loadStyles(el, binding, vnode);
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index 6c87f90f4..f74c6b573 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -209,12 +209,7 @@ const classes = {
     dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',
-    overlay: ({ instance }) => [
-        'p-cascadeselect-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    overlay: 'p-cascadeselect-overlay p-component',
     listContainer: 'p-cascadeselect-list-container',
     list: 'p-cascadeselect-list',
     item: ({ instance, processedOption }) => [
diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
index 1d2311b0b..58b7415dd 100644
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -114,12 +114,11 @@ const theme = ({ dt }) => `
 const classes = {
     root: 'p-colorpicker p-component',
     preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
-    panel: ({ instance, props }) => [
+    panel: ({ props }) => [
         'p-colorpicker-panel',
         {
             'p-colorpicker-panel-inline': props.inline,
-            'p-disabled': props.disabled,
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
+            'p-disabled': props.disabled
         }
     ],
     colorSelector: 'p-colorpicker-color-selector',
diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index 40c3e5336..47ae6c070 100644
--- a/components/lib/config/PrimeVue.js
+++ b/components/lib/config/PrimeVue.js
@@ -1,4 +1,5 @@
 import { FilterMatchMode } from 'primevue/api';
+import PrimeVueService from 'primevue/service';
 import Theme, { ThemeService } from 'primevue/themes';
 import { inject, reactive, ref, watch } from 'vue';
 
@@ -175,14 +176,31 @@ export function setup(app, options) {
 export function setupTheme(app, PrimeVue) {
     const isChanged = ref(false);
 
+    watch(
+        PrimeVue.config,
+        (newValue, oldValue) => {
+            PrimeVueService.emit('config:change', { newValue, oldValue });
+        },
+        { immediate: true, deep: true }
+    );
+
+    watch(
+        () => PrimeVue.config.ripple,
+        (newValue, oldValue) => {
+            PrimeVueService.emit('config:ripple:change', { newValue, oldValue });
+        },
+        { immediate: true, deep: true }
+    );
+
     watch(
         PrimeVue.config.theme,
-        (newValue) => {
+        (newValue, oldValue) => {
             if (!isChanged.value) {
                 Theme.setTheme(newValue);
             }
 
             isChanged.value = false;
+            PrimeVueService.emit('config:theme:change', { newValue, oldValue });
         },
         { immediate: true, deep: true }
     );
diff --git a/components/lib/confirmpopup/style/ConfirmPopupStyle.js b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
index b08142a36..1021718b4 100644
--- a/components/lib/confirmpopup/style/ConfirmPopupStyle.js
+++ b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
@@ -111,12 +111,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance }) => [
-        'p-confirmpopup p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    root: 'p-confirmpopup p-component',
     content: 'p-confirmpopup-content',
     icon: 'p-confirmpopup-icon',
     message: 'p-confirmpopup-message',
diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js
index bcf499b62..461a048e5 100644
--- a/components/lib/contextmenu/style/ContextMenuStyle.js
+++ b/components/lib/contextmenu/style/ContextMenuStyle.js
@@ -124,12 +124,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance }) => [
-        'p-contextmenu p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    root: 'p-contextmenu p-component',
     rootList: 'p-contextmenu-root-list',
     item: ({ instance, processedItem }) => [
         'p-contextmenu-item',
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index cdd436649..7bebe8517 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -643,8 +643,7 @@ const classes = {
     filterOverlay: ({ instance, props }) => [
         'p-datatable-filter-overlay p-component',
         {
-            'p-datatable-filter-overlay-popover': props.display === 'menu',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
+            'p-datatable-filter-overlay-popover': props.display === 'menu'
         }
     ],
     filterConstraintList: 'p-datatable-filter-constraint-list',
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index 30bba194f..fd88df460 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -359,8 +359,7 @@ const classes = {
         {
             'p-datepicker-panel-inline': props.inline,
             'p-disabled': props.disabled,
-            'p-datepicker-timeonly': props.timeOnly,
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
+            'p-datepicker-timeonly': props.timeOnly
         }
     ],
     calendarContainer: 'p-datepicker-calendar-container',
diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js
index 205990539..07663a17e 100644
--- a/components/lib/dialog/style/DialogStyle.js
+++ b/components/lib/dialog/style/DialogStyle.js
@@ -167,8 +167,7 @@ const classes = {
         'p-dialog p-component',
         {
             'p-dialog-rtl': props.rtl,
-            'p-dialog-maximized': props.maximizable && instance.maximized,
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
+            'p-dialog-maximized': props.maximizable && instance.maximized
         }
     ],
     header: 'p-dialog-header',
diff --git a/components/lib/drawer/style/DrawerStyle.js b/components/lib/drawer/style/DrawerStyle.js
index f49f320b4..c6e7e2763 100644
--- a/components/lib/drawer/style/DrawerStyle.js
+++ b/components/lib/drawer/style/DrawerStyle.js
@@ -181,7 +181,6 @@ const classes = {
     root: ({ instance }) => [
         'p-drawer p-component',
         {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false,
             'p-drawer-full': instance.fullScreen
         }
     ],
diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js
index b274fa97f..bea3a3c88 100644
--- a/components/lib/galleria/style/GalleriaStyle.js
+++ b/components/lib/galleria/style/GalleriaStyle.js
@@ -402,12 +402,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    mask: ({ instance }) => [
-        'p-galleria-mask p-component-overlay p-component-overlay-enter',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    mask: 'p-galleria-mask p-component-overlay p-component-overlay-enter',
     root: ({ instance }) => {
         const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
         const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
diff --git a/components/lib/menu/style/MenuStyle.js b/components/lib/menu/style/MenuStyle.js
index f57ca71ef..03f7e2613 100644
--- a/components/lib/menu/style/MenuStyle.js
+++ b/components/lib/menu/style/MenuStyle.js
@@ -92,11 +92,10 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ props }) => [
         'p-menu p-component',
         {
-            'p-menu-overlay': props.popup,
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
+            'p-menu-overlay': props.popup
         }
     ],
     start: 'p-menu-start',
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index f8e648c50..3debb90fa 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/components/lib/multiselect/style/MultiSelectStyle.js
@@ -224,12 +224,7 @@ const classes = {
     dropdown: 'p-multiselect-dropdown',
     loadingIcon: 'p-multiselect-loading-icon',
     dropdownIcon: 'p-multiselect-dropdown-icon',
-    overlay: ({ instance }) => [
-        'p-multiselect-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    overlay: 'p-multiselect-overlay p-component',
     header: 'p-multiselect-header',
     pcFilterContainer: 'p-multiselect-filter-container',
     pcFilter: 'p-multiselect-filter',
diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
index b6f6e1f9e..1da6a5bba 100644
--- a/components/lib/password/style/PasswordStyle.js
+++ b/components/lib/password/style/PasswordStyle.js
@@ -86,12 +86,7 @@ const classes = {
     ptInput: 'p-password-input',
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
-    overlay: ({ instance }) => [
-        'p-password-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    overlay: 'p-password-overlay p-component',
     meter: 'p-password-meter',
     meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
     meterText: 'p-password-meter-text'
diff --git a/components/lib/popover/style/PopoverStyle.js b/components/lib/popover/style/PopoverStyle.js
index c4d9b7a86..09d7b6dc0 100644
--- a/components/lib/popover/style/PopoverStyle.js
+++ b/components/lib/popover/style/PopoverStyle.js
@@ -81,12 +81,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance }) => [
-        'p-popover p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    root: 'p-popover p-component',
     content: 'p-popover-content'
 };
 
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 5a8b94396..a02620451 100644
--- a/components/lib/ripple/Ripple.js
+++ b/components/lib/ripple/Ripple.js
@@ -2,14 +2,16 @@ import { DomHandler } from 'primevue/utils';
 import BaseRipple from './BaseRipple';
 
 const Ripple = BaseRipple.extend('ripple', {
-    mounted(el) {
-        const config = el?.$instance?.$config;
+    watch: {
+        'config.ripple'(newValue) {
+            if (newValue) {
+                this.create(this.$host);
+                this.bindEvents(this.$host);
 
-        if (config && config.ripple) {
-            this.create(el);
-            this.bindEvents(el);
-
-            el.setAttribute('data-pd-ripple', true);
+                this.$host.setAttribute('data-pd-ripple', true);
+            } else {
+                this.remove(this.$host);
+            }
         }
     },
     unmounted(el) {
diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js
index 6594bc6af..6d5e896cb 100644
--- a/components/lib/select/style/SelectStyle.js
+++ b/components/lib/select/style/SelectStyle.js
@@ -219,12 +219,7 @@ const classes = {
     dropdown: 'p-select-dropdown',
     loadingicon: 'p-select-loading-icon',
     dropdownIcon: 'p-select-dropdown-icon',
-    overlay: ({ instance }) => [
-        'p-select-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    overlay: 'p-select-overlay p-component',
     header: 'p-select-header',
     pcFilter: 'p-select-filter',
     listContainer: 'p-select-list-container',
diff --git a/components/lib/service/PrimeVueService.js b/components/lib/service/PrimeVueService.js
new file mode 100644
index 000000000..602940783
--- /dev/null
+++ b/components/lib/service/PrimeVueService.js
@@ -0,0 +1,3 @@
+import { EventBus } from 'primevue/utils';
+
+export default EventBus();
diff --git a/components/lib/service/package.json b/components/lib/service/package.json
new file mode 100644
index 000000000..1324d6a48
--- /dev/null
+++ b/components/lib/service/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./primevueservice.cjs.js",
+    "module": "./primevueservice.esm.js",
+    "unpkg": "./primevueservice.min.js"
+}
diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
index c49a26962..6e7575cd4 100644
--- a/components/lib/tieredmenu/style/TieredMenuStyle.js
+++ b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -135,8 +135,7 @@ const classes = {
     root: ({ instance, props }) => [
         'p-tieredmenu p-component',
         {
-            'p-tieredmenu-overlay': props.popup,
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
+            'p-tieredmenu-overlay': props.popup
         }
     ],
     start: 'p-tieredmenu-start',
diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js
index c9d040a73..4a7e54097 100644
--- a/components/lib/toast/style/ToastStyle.js
+++ b/components/lib/toast/style/ToastStyle.js
@@ -230,12 +230,7 @@ const inlineStyles = {
 };
 
 const classes = {
-    root: ({ props, instance }) => [
-        'p-toast p-component p-toast-' + props.position,
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    root: ({ props }) => ['p-toast p-component p-toast-' + props.position],
     message: ({ props }) => [
         'p-toast-message',
         {
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
index 7a33d4f6f..18eb7aad9 100644
--- a/components/lib/treeselect/style/TreeSelectStyle.js
+++ b/components/lib/treeselect/style/TreeSelectStyle.js
@@ -154,12 +154,7 @@ const classes = {
     pcChipLabel: 'p-treeselect-chip-label',
     dropdown: 'p-treeselect-dropdown',
     dropdownIcon: 'p-treeselect-dropdown-icon',
-    panel: ({ instance }) => [
-        'p-treeselect-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
+    panel: 'p-treeselect-overlay p-component',
     treeContainer: 'p-treeselect-tree-container',
     emptyMessage: 'p-treeselect-empty-message'
 };
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 0497b7294..b04d4b45f 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -203,7 +203,7 @@ export default {
             EventBus.emit('theme-palette-change');
         },
         onRippleChange(value) {
-            this.$appState.ripple = value;
+            this.$primevue.config.ripple = value;
         },
         onPresetChange(value) {
             const preset = value === 'Lara' ? Lara : Aura;
@@ -214,7 +214,7 @@ export default {
     },
     computed: {
         rippleActive() {
-            return this.$appState.ripple;
+            return this.$primevue.config.ripple;
         }
     }
 };
diff --git a/layouts/default.vue b/layouts/default.vue
index d338ae7cb..2926a352e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -73,8 +73,7 @@ export default {
             return [
                 'layout-wrapper',
                 {
-                    'layout-news-active': this.$appState.newsActive,
-                    'p-ripple-disabled': this.$appState.ripple === false
+                    'layout-news-active': this.$appState.newsActive
                 }
             ];
         }
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 29c8472ca..3edc21fb7 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -221,6 +221,7 @@ export default {
         },
         alias: {
             'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
+            'primevue/service': path.resolve(__dirname, './components/lib/service/PrimeVueService.js'),
             'primevue/config': path.resolve(__dirname, './components/lib/config/PrimeVue.js'),
             'primevue/styled': path.resolve(__dirname, './components/lib/styled/PrimeVueStyled.js'),
             'primevue/unstyled': path.resolve(__dirname, './components/lib/unstyled/PrimeVueUnstyled.js'),
diff --git a/pages/index.vue b/pages/index.vue
index 017209bdf..79eec734a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -48,7 +48,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['landing', { 'layout-news-active': this.$appState?.newsActive, 'p-ripple-disabled': this.$appState.ripple === false }];
+            return ['landing', { 'layout-news-active': this.$appState?.newsActive }];
         }
     },
     components: {
diff --git a/plugins/app-state.js b/plugins/app-state.js
index 0a075d96a..6488733b0 100644
--- a/plugins/app-state.js
+++ b/plugins/app-state.js
@@ -11,7 +11,6 @@ const $appState = {
             sourceType: 'options-api',
             newsActive: false,
             announcement: null,
-            ripple: false,
             storageKey: 'primevue'
         });
     }
diff --git a/rollup.config.js b/rollup.config.js
index fd0259c30..be9c44fe3 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -228,6 +228,7 @@ const CORE_THEME_DEPENDENCIES = {
 const CORE_DEPENDENCIES = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
+    'primevue/service': 'primevue.service',
     'primevue/config': 'primevue.config',
     'primevue/styled': 'primevue.styled',
     'primevue/unstyled': 'primevue.unstyled',
@@ -514,6 +515,10 @@ function addDirectives() {
     addEntry('animateonscroll', 'AnimateOnScroll.js', 'animateonscroll');
 }
 
+function addService() {
+    addEntry('service', 'PrimeVueService.js', 'primevueservice');
+}
+
 function addConfig() {
     addEntry('config', 'PrimeVue.js', 'config');
     addEntry('styled', 'PrimeVueStyled.js', 'primevuestyled');
@@ -605,6 +610,7 @@ addStyle();
 addThemes();
 addBase();
 addApi();
+addService();
 addConfig();
 addDirectives();
 addServices();