Infinite WARN loop with slots and nuxt-content

[gitFoxCode]

I get 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. when I use an icon component and use multiple slots at the same time.

Replication:

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/content', "nuxt-icon"],
  content: {
    documentDriven: {
      trailingSlash: false
    }
  }
})

components/content/ComponentWithIcon.vue

<template>
    <div>
        Component with icon:
        <Icon name="bxl:python" class="w-8 h-8" />
    </div>
</template>

components/content/Container.vue:

<template>
    <div>
        <slot />
    </div>
</template>

layouts/full.vue:

<template>
    <div class="custom-layout">
        <slot />
    </div>
</template>

content/index.md:

---
layout: 'full'
---

:component-with-icon

::container
Slot nr 1
::::container
Slot nr 2
::::
::

This bug prevents the site from being used in development mode due to the infinity loop. The problem does not occur in the latest beta version of nuxt-icon, but in the original project I use nuxt-ui, which uses the old version

[antfu]

@benjamincanac Would it be possible for the Nuxt UI 2 to use the new icon module (after we do stable releases) so people could benefit from it before wait for UI 3?

[benjamincanac]

@antfu I don't see how it's related to this issue but yeah it would be nice! Although didn't you say it wasn't compatible with @egoist/tailwindcss-icons at the moment?

[antfu]

The problem does not occur in the latest beta version of nuxt-icon, but in the original project I use nuxt-ui, which uses the old version

This issue is no longer relevant in the beta version, but ppl still get the old behavior because Nuxt UI v2 still on the previous version.

it wasn't compatible with @egoist/tailwindcss-icons at the moment?

It works, just not the most efficient on the SSR (might have duplicate icon CSS). On client side we do dedupe with the user's stylesheet, so the limitation won't affect client nav or dynamic icons

[gitFoxCode]

@antfu Is there an update on this? When I install additionally nuxt-icon beta version together with nuxt-ui there are complications

[benjamincanac]

@gitFoxCode Nuxt Icon v1.0.0-beta is not yet compatible with @nuxt/ui, we have an open PR to support it: https://github.com/nuxt/ui/pull/1789. Once [email protected] is officially released, it will probably be available in the next minor of @nuxt/ui.