nuxt / nuxt/icon

NuxtIcon + Vuetify - Warning: Slot "default" invoked outside of the render function

Open
#42 11 comments 6 reactions 0 assignees View on GitHub

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

Capture d’écran 2023-01-16 à 12 04 59

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.