the icon component that integrated in nuxt-ui by default is not shown at first loading

[gaomingzhao666]

Environment

Nuxt project info: 12:26:48 PM

---

• Operating System: Windows_NT
• Node Version: v20.16.0
• Nuxt Version: 3.12.4
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, ssr, typescript, imports, modules, svgo, mongoose, i18n, compatibilityDate
• Runtime Modules: @nuxt/test-utils/[email protected], [email protected], @pinia/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

---

Version

v2.18.4

Reproduction

the online address: https://nano-portfolio-ruby.vercel.app/
the repo: https://github.com/gaomingzhao666/nano-portfolio

Description

Hey, I don't install nuxt-icon module and I can use icons directly in nuxt-ui, because I think the nuxt-ui already integrated nuxt-icon module.

The problem is: that the icon is empty when users first enter the page that shows icons, and when I turn off the computer and open it in next day, the bug is reproduced.

I think the server cache is not working properly, should I install nuxt-icon module manually or it's just a bug to nuxt-ui

Additional context

No response

Logs

No response

[Tragio]

Hi @gaomingzhao666 👋

Take a look at: #2124 (comment)

[gaomingzhao666]

Hi @gaomingzhao666 👋

Take a look at: #2124 (comment)

Thank you so much!! That's what I want

[gaomingzhao666]

Hi @gaomingzhao666 👋

Take a look at: #2124 (comment)

Thank you so much for your help, but the issue is still here in my case so I decided to reopen this issue.

I tried to add serverBundle: 'local' in nuxt.config.ts, and installed the icon-set locally, everything is fined in dev mode locally, but the issue that icons component can't load properly when users first load icons component is still here on deployed vercel server.

Also, I tried to install nuxt-icon@latest module independently from nuxt-ui, but the problem is still here.

[gAlleb]

Hi! I can confirm this behavior but starting from nuxt 3.13.0

I have also recently upgraded to nuxt 3.13.2 and icons have broken a bit more:

1. Navigate to webpage (generated by npm run generate, incognito mode, no cache): no icons.
2. Refresh page: sometimes there are icons, sometimes not, sometimes only half of them.

I've tried @nuxt/[email protected] - @nuxt/[email protected] - same result. However downgrading to nuxt 3.12.4 fixes the issue.

Icons work ok when you have a simple page with no additional modules or stores. But when you add stores (pinia), persistency, onMounted hooks - it seems like something messing with the icons. Everything else works great.

[gAlleb]

little update to the previous post.

Finally managed to make it work (both ssr and ssg) with:

1. Installed locally all icons (@iconify-json/***).

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui'
  ],
  icon: {
clientBundle: {
      // scan all components in the project and include icons 
      scan: true,
      // guard for uncompressed bundle size, will fail the build if exceeds
      sizeLimitKb: 256,
    },
  },
})

@gaomingzhao666, I think you should include clientBundle. It does fix it for nuxt 3.12.4 and 3.13.2 and for nuxt/ui also.

Howewer one question still bothers me. Same nuxt/ui, same tailwind. 3.12.4 without the above settings works like a charm, but 3.13.2 barely loads icons. Just changing nuxt 3.12.4 to 3.13.2 and the necessity of the the above arises. But why?

Also I've noticed that if 3.12.4 and nuxt/[email protected] together result in the same issue without the above settings (with nuxt/[email protected] everything works fine).

With the minimal amount of site payload (one page - 2-3 icons) - 3.13.2 works fine without the above changes. When full project is in place - icons without the above changes stop working. I'm talking about npm run generate with ssr:true. npm run build works in every case.

Can someone elaborate?

[gaomingzhao666]

@gAlleb, Thank you so much for your help with the detailed and patient interpretation.😊

I added the code that you mentioned, the problem is solved.

[gaomingzhao666]

@gAlleb, Thank you so much for your help with the detailed and patient interpretation.😊

I added the code that you mentioned, the problem is solved.

I would sad to say that the problem is still here but barely better, there are still a couple of icons can not load when I leave for a long time and then access the website again, but at least most of icons can load.😂

I guess it is just too many icons on this page.

[gAlleb]

maybe

Scanning is relying on static analysis, which means only literal usages will be detected. Avoid constructing the icon name dynamically whenever possible.

<template>
  <!-- Avoid this -->
  <Icon :name="`carbon:${dark ? 'moon' : 'sun'}`" />

  <!-- Prefer this -->
  <Icon :name="dark ? 'carbon:moon' : 'carbon:sun'" />
</template>

Also with clientBundle it should work. You can try and explicitly set icons that do not show:

icon: {
    clientBundle: {

      // list of icons to include in the client bundle
      icons: [
        'uil:github',
        'logos:vitejs'

      // here

      ],

      scan: true,
      includeCustomCollections: true, 
      sizeLimitKb: 256,
    },
  },

[gaomingzhao666]

@gAlleb Thanks again for your help.

The official documentation said that it would find icons and automatically import from iconify if installed icon-set locally, explicitly specifying the icon-set array in nuxt.config.ts may be a great method to solve it.

Thank you so much for your detailed explanation and continual help!!