NuxtN
Nuxt•2y ago
nilssso

Nuxt Content ContentSlot and "property was accessed but is not defined"

For Nuxt Content I wrote a simple card component that wraps Nuxt UI's "UCard" so that in markdown I can write this
::card
#header
Foo
#footer
Bar
#default
Baz
::

The component is defined as this:
// ~/components/content/Card.vue
<template>
  <u-card class="my-4">
    <template v-if="$slots.header" #header>
      <content-slot :use="$slots.header" unwrap="p" />
    </template>
    <template v-if="$slots.footer" #footer>
      <content-slot :use="$slots.footer" unwrap="p" />
    </template>
    <slot />
  </u-card>
</template>

But when loading the page I get swamped with a few "property was accessed but is not defined" Vue warn warnings
WARN  [Vue warn]: Property "class" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "style" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "key" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref_key" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref_for" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

Is there anything special I need to write in the component that I missing?

These warnings do not occur for <slot />, only for <content-slot>.

And it doesn't look related to UCard, since if I replace u-card with just div (and remove #header/#footer from the template tags) I get the same warnings.
Was this page helpful?