Fixed #5907 - [nuxt] Could not access pt. The only available runtime config keys on the client side are public and app

components/lib/basecomponent/BaseComponent.vue

@@ -30,8 +30,8 @@ export default {
             immediate: true,
             handler(newValue) {
                 if (!newValue) {
-                    BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
+                    BaseComponentStyle.loadStyle({ nonce: this.$primevueConfig?.csp?.nonce });
-                    this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
+                    this.$options.style && this.$style.loadStyle({ nonce: this.$primevueConfig?.csp?.nonce });
                 }
             }
         }
@@ -43,7 +43,7 @@ export default {
 
         (value || originalValue)?.hooks?.['onBeforeCreate']?.();
 
-        const _useptInConfig = this.$config?.pt?.['_usept'];
+        const _useptInConfig = this.$primevueConfig?.pt?.['_usept'];
         const originalValueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.originalValue : undefined;
         const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
 
@@ -53,7 +53,7 @@ export default {
         this._hook('onCreated');
     },
     beforeMount() {
-        BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
+        BaseStyle.loadStyle({ nonce: this.$primevueConfig?.csp?.nonce });
         this._loadGlobalStyles();
         this._hook('onBeforeMount');
     },
@@ -98,7 +98,7 @@ export default {
 
             const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
 
-            ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
+            ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$primevueConfig?.csp?.nonce });
         },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -118,7 +118,7 @@ export default {
         },
         _getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
             const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
-            const { mergeSections = true, mergeProps: useMergeProps = false } = this._getPropValue('ptOptions') || this.$config?.ptOptions || {};
+            const { mergeSections = true, mergeProps: useMergeProps = false } = this._getPropValue('ptOptions') || this.$primevueConfig?.ptOptions || {};
             const global = searchInDefaultPT ? (searchOut ? this._useGlobalPT(this._getPTClassValue, key, params) : this._useDefaultPT(this._getPTClassValue, key, params)) : undefined;
             const self = searchOut ? undefined : this._getPTSelf(obj, this._getPTClassValue, key, { ...params, global: global || {} });
             const datasets = this._getPTDatasets(key);
@@ -171,7 +171,7 @@ export default {
             const fn = (value) => callback(value, key, params);
 
             if (pt?.hasOwnProperty('_usept')) {
-                const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || this.$config?.ptOptions || {};
+                const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || this.$primevueConfig?.ptOptions || {};
                 const originalValue = fn(pt.originalValue);
                 const value = fn(pt.value);
 
@@ -216,13 +216,13 @@ export default {
     },
     computed: {
         globalPT() {
-            return this._getPT(this.$config?.pt, undefined, (value) => ObjectUtils.getItemValue(value, { instance: this }));
+            return this._getPT(this.$primevueConfig?.pt, undefined, (value) => ObjectUtils.getItemValue(value, { instance: this }));
         },
         defaultPT() {
-            return this._getPT(this.$config?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { ...this.$params }) || ObjectUtils.getItemValue(value, { ...this.$params }));
+            return this._getPT(this.$primevueConfig?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { ...this.$params }) || ObjectUtils.getItemValue(value, { ...this.$params }));
         },
         isUnstyled() {
-            return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
+            return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled;
         },
         $params() {
             const parentInstance = this._getHostInstance(this) || this.$parent;
@@ -245,7 +245,7 @@ export default {
         $style() {
             return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
         },
-        $config() {
+        $primevueConfig() {
             return this.$primevue?.config;
         },
         $name() {

components/lib/basedirective/BaseDirective.js

@@ -22,7 +22,7 @@ const BaseDirective = {
             return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
         };
 
-        const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {};
+        const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$primevueConfig?.ptOptions || {};
         const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT(), getValue, key, params) : undefined;
         const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
         const datasets = BaseDirective._getPTDatasets(instance, key);
@@ -57,7 +57,7 @@ const BaseDirective = {
         const fn = (value) => callback(value, key, params);
 
         if (pt?.hasOwnProperty('_usept')) {
-            const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || instance.$config?.ptOptions || {};
+            const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || instance.$primevueConfig?.ptOptions || {};
             const originalValue = fn(pt.originalValue);
             const value = fn(pt.value);
 
@@ -105,7 +105,7 @@ const BaseDirective = {
                 $value: binding?.value,
                 $el: $prevInstance['$el'] || el || undefined,
                 $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
-                $config: config,
+                $primevueConfig: config,
                 /* computed instance variables */
                 defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
                 isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),

components/lib/ripple/Ripple.js

@@ -3,7 +3,7 @@ import BaseRipple from './BaseRipple';
 
 const Ripple = BaseRipple.extend('ripple', {
     mounted(el) {
-        const config = el?.$instance?.$config;
+        const config = el?.$instance?.$primevueConfig;
 
         if (config && config.ripple) {
             this.create(el);

components/lib/virtualscroller/BaseVirtualScroller.vue

@@ -94,7 +94,7 @@ export default {
         };
     },
     beforeMount() {
-        VirtualScrollerStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
+        VirtualScrollerStyle.loadStyle({ nonce: this.$primevueConfig?.csp?.nonce });
     }
 };
 </script>