Vuetify + NuxtIcon: Vue warn Slot "default" invoked outside of the render function:

[alniv94]

I'm using nuxt-icon and vuetify, got this warnings when using the nuxt-icon inside the vTabs and vMenu of vuetify. The warnings are produced when the icons are hidden then display like in vTabs and vMenu. Here is the link to reproduce what I encounter: https://stackblitz.com/edit/nuxt-starter-fnzdtw?file=app.vue

[stephenjason89]

I experience this as well. Same goes for V-Tooltip

[niko-chaffinchicas]

I've found that there are a variety of contexts where Vuetify prefers to have the <Icon> component placed in the default slot of the <v-icon> component. There's still some funky stuff you have to do, like use a blank icon attribute on <v-btn> if you want an icon button, and so on:

<v-btn icon="">
  <v-icon>
    <Icon name="mdi:vuetify" />
  </v-icon>
</v-btn>

But from what I can see in the playground, wrapping the <Icon> component in a <v-icon> component does resolve the warning that you're seeing.

[stephenjason89]

I've found that there are a variety of contexts where Vuetify prefers to have the <Icon> component placed in the default slot of the <v-icon> component. There's still some funky stuff you have to do, like use a blank icon attribute on <v-btn> if you want an icon button, and so on:

<v-btn icon="">
  <v-icon>
    <Icon name="mdi:vuetify" />
  </v-icon>
</v-btn>

But from what I can see in the playground, wrapping the <Icon> component in a <v-icon> component does resolve the warning that you're seeing.

I made a component that wraps Icon with v-icon

Then tried using it like

Still getting

But even this causes that error

[niko-chaffinchicas]

@stephenjason89 Could you share a stackblitz link demonstrating the issue you're running into? I wasn't able to replicate that issue from the snippets you posted.

[stephenjason89]

Hello @niko-chaffinchicas, It seems like, i was getting this error on Icon. Upon trying IconCSS every error went away. I end up creating an Icon component

This solved all the errors I had

You can use it like

Other attrs like color, size, etc. will be inherited by v-icon

[OriaBiton]

I experienced this as well. What seemed to work best for me was a combination of the suggestions above: Only using IconCSS.

<template>
  <!-- Regular <Icon> (+Vuetify) causes "Vue warn Slot "default" invoked outside of the render function" -->
  <!-- https://github.com/nuxt-modules/icon/issues/89 -->
  <IconCSS
    :name="icon"
    :size="sizeInUnits"
    :class="{ start, end }"
    :style="{ color: resolvedColor }"
  />
</template>

<script setup lang="ts">
import { LABEL_COLORS } from '~/assets/constants';

const SIZES = {
  'x-small': '1em',
  'small': '1.25em',
  'default': '1.5em',
  'large': '1.75em',
  'x-large': '2em'
};

const {
  size = 'default',
  color
} = defineProps<{
  icon: string;
  size?: keyof typeof SIZES | number;
  color?: string;
  start?: boolean;
  end?: boolean;
}>();

const sizeInUnits = computed(() => typeof size == 'number' ? size.toString() : SIZES[size]);
const isLabelColor = computed(() => color && LABEL_COLORS.includes(color));
const resolvedColor = computed(() => isLabelColor.value ? `rgb(var(--v-theme-${color}))` : color);
</script>

<style scoped>
.start {
  margin-inline-end: 8px;
}
.end {
  margin-inline-start: 8px;
}
</style>

Since this workaround is based on an experimental feature, a proper fix would be appreciated.

[Me-Phew]

I've noticed that lazy-loading the icon (prefixing it with Lazy) like this: <LazyIcon :name='name' /> gets rid of the error while everything seems to be working correctly.

In case it is important I was getting the error when using the icon inside the v-autocomplete's #item slot.

I'm not sure if this is a correct workaround but since IconCSS is an experimental feature and doesn't work with some icons that I need I don't see any other solution for now.

[alniv94]

Any updates please ?

[lukatavcer]

I am having the same issue, none of the solutions above fix the issue... the warning stays. I get it when I am switching pages and it spams a lot of warnings.