NuxtIcon + Vuetify - Warning: Slot "default" invoked outside of the render function
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 96
- Avg merge
- 8h 12m
- Merged PRs (30d)
- 2
Description
Hi, thanks for this pluggin which is really great.
I'm using NuxtIcon by integrating it with Vuetify, and I noticed that when a component is hidden and then displayed again (like a menu for example), when it is displayed again I have as many errors in console as icons displayed by the component.
I have created a StackBlitz that uses Vuetify 3 with Nuxt Icon to reproduce what I encounter on my application.
(https://stackblitz.com/edit/nuxt-starter-uij6h7)
The steps to reproduce:
- Open the menu
- Close the menu
- Open the menu then click on the 3 dots icon to open the sub menu
- Look at the console
(If it doesn't work the first time you can change pages and try again)
When I comment on the use of the component that wraps NuxtIcon in the vuetify.ts plugin I no longer get these warnings.
Maybe I'm not using the vue h() function correctly in the vuetify plugin..
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Begin by running the linked StackBlitz reproduction and following its listed menu steps. Then inspect the vuetify.ts plugin integration and the NuxtIcon component; done means the warning no longer appears after reopening the menu and opening its submenu.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100