Nuxt•3mo ago

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
::

::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>

// ~/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.

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.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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