NUXT_B3015

Non-serializable prop on a server component

B3015

A template passes a function, a class or a class instance (such as new Date()) as a prop to a server component, or in the props or context of a <NuxtIsland>. Props of a server component are serialized as JSON and sent to the server to render it, so these values cannot reach the component intact.

This warning is reported unless experimental.templateDiagnostics is disabled. Only values that can be seen in the template are checked: inline functions, new expressions, and functions or classes declared at the top level of <script setup>.

Resolution

Pass only JSON-serializable values (strings, numbers, booleans, null, arrays and plain objects), and move the logic that needs the function into the server component:

app/pages/index.vue
 <template>
-  <PriceTag :format="value => `$${value}`" :value="price" />
+  <PriceTag currency="USD" :value="price" />
 </template>

If the component needs a function from its parent, render it on the client instead of as a server component.

Read more in Docs > Guide > Concepts > Server Components.

Was this helpful?