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

[Tarabass]

Describe the bug

After a clean installation I get the following warning in the console. In bigger projects it can even result in an error instead of a warning.

[nuxt] Could not access 'pt'. The only available runtime config keys on the client side are 'public' and 'app'. See 'https://nuxt.com/docs/guide/going-further/runtime-config' for more information.

Reproducer

https://stackblitz.com/edit/github-ydzyjt

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

npx nuxi init NuxtPrimeVueTest
cd NuxtPrimeVueTest
npx nuxi@latest module add primevue

Expected behavior

No response

[Tarabass]

Issue on PrimeVue Nuxt Module
primefaces/primevue-nuxt-module#69

[FatNerdPeng]

I have encountered the same problem. I did not have this problem before, but I encountered it after updating some dependencies. Specifically
nuxt 3.11.1 to 3.12.1
primevue 3.50.0 to 3.52.0
vue 3.4.21 to 3.4.27
I don't know which one caused this warning.In my case,the code I ultimately traced is here http://.../_nuxt/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js?v=2acd929e:

return new Proxy(runtimeConfig,{
        get(target, p, receiver) {
            if (typeof p === "string" && p !== "public" && !(p in target) && !p.startsWith("__v")) {
                console.warn(`[nuxt] Could not access \`${p}\`. The only available runtime config keys on the client side are ${keys.join(", ")} and ${lastKey}. See \`https://nuxt.com/docs/guide/going-further/runtime-config\` for more information.`);
            }
            return Reflect.get(target, p, receiver);
        }
    });

So, does pt refer to pass through? The only time I use the pt attribute is when modifying the style of the primevue component, I use a similar notation:

:pt="{
    content: () => ({
      style: {
        textAlign: 'center',
      },
    }),
  }"

[Tarabass]

I have encountered the same problem. I did not have this problem before, but I encountered it after updating some dependencies. Specifically
nuxt 3.11.1 to 3.12.1
primevue 3.50.0 to 3.52.0
vue 3.4.21 to 3.4.27
I don't know which one caused this warning.In my case,the code I ultimately traced is here http://.../_nuxt/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js?v=2acd929e:

return new Proxy(runtimeConfig,{
        get(target, p, receiver) {
            if (typeof p === "string" && p !== "public" && !(p in target) && !p.startsWith("__v")) {
                console.warn(`[nuxt] Could not access \`${p}\`. The only available runtime config keys on the client side are ${keys.join(", ")} and ${lastKey}. See \`https://nuxt.com/docs/guide/going-further/runtime-config\` for more information.`);
            }
            return Reflect.get(target, p, receiver);
        }
    });

So, does pt refer to pass through? The only time I use the pt attribute is when modifying the style of the primevue component, I use a similar notation:

:pt="{
    content: () => ({
      style: {
        textAlign: 'center',
      },
    }),
  }"

Pt stands for pass through indeed. Primevue has a Pt config option in the nuxt config, but that's on the primevue object/module configuration, not on the root of the config declaration. It even occurs when you don't use Pt at all, anywhere. So not in the config or on a component.

[mertsincan]

Hi everyone,

I can't decide if this is a bug or something I should fix. With the new improvements in Nuxt, the $config name has been reserved. This is causing some interference with our own $config computed property in BaseComponent and other Vue files.

To resolve this, I've temporarily replaced our $config with $primevueConfig, and everything is now working smoothly. However, it would have been ideal if Nuxt had chosen a more specific name to avoid such conflicts.

https://nuxt.com/docs/guide/going-further/runtime-config#exposing

Public runtime config is accessible in Vue templates with $config.public.

Exp;

// in my app
<template>
    <div>...</div>
</template>
<script>
export default {
    name: 'MyComponent',
    beforeCreate() {
        console.log(this.$config); // output: { public: ..., app: ...}
    },
    computed: {
        $config() {
            return { test: 'TEST'};
        }
    }
};
</script>

[mertsincan]

Discussion in Nuxt; nuxt/nuxt#27645