-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vuetify + NuxtIcon: Vue warn Slot "default" invoked outside of the render function: #89
Comments
I experience this as well. Same goes for V-Tooltip |
I've found that there are a variety of contexts where Vuetify prefers to have the <v-btn icon="">
<v-icon>
<Icon name="mdi:vuetify" />
</v-icon>
</v-btn> But from what I can see in the playground, wrapping the |
|
@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. |
Hello @niko-chaffinchicas, It seems like, i was getting this error on Icon. This solved all the errors I had You can use it like |
I experienced this as well. <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. |
I've noticed that lazy-loading the icon (prefixing it with Lazy) like this: In case it is important I was getting the error when using the icon inside the 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. |
Any updates please ? |
I am having the same issue, none of the solutions above fix the issue... the warning stays. |
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
The text was updated successfully, but these errors were encountered: