Nuxt•2w ago

Why does UButton icon 404 error unless icon is separately pre-loaded?

Relevant chunk of code:

ColorScheme placeholder="" tag="span">
   <UButton
    v-model="isDark" :icon="isDark ? 'i-fa-moon-o' : 'i-fa-sun-o'" @click="toggleColourMode">    </UButton>
</ColorScheme>

ColorScheme placeholder="" tag="span">
   <UButton
    v-model="isDark" :icon="isDark ? 'i-fa-moon-o' : 'i-fa-sun-o'" @click="toggleColourMode">    </UButton>
</ColorScheme>

By itself I get the error: "Failed to load resource: the server responded with a status of 404 ()" However it works if after the above I add:

<Icon name="fa:sun-o" class="w-0 h-0"></Icon>
<Icon name="fa:moon-o" class="w-0 h-0"></Icon>

<Icon name="fa:sun-o" class="w-0 h-0"></Icon>
<Icon name="fa:moon-o" class="w-0 h-0"></Icon>

Is there a less hacky way to preload icons? I tried loadIcons() but that didn't work. Thanks!!

5 Replies

Orbis•2w ago

build or generate? 🙂

Raphael•6d ago

Thanks for the response @Orbis sorry I missed it before! This is happening when I use build - using the default nuxt GitHub action to deploy with npx nuxt build --preset github_pages (super new to Nuxt so sorry if I misunderstood the question)

Orbis•6d ago

So its generate. I think this part will be rendered at build time. Try 2 buttons with v-show instead.

Raphael•4d ago

What do you mean "its generate" ? Is nuxt build --preset the same as generate? And will try it thanks Didn't fix it unfortunately 😦

Orbis•3d ago

Mhhh. Do you have a minimal reproduction?

Gaming

Programming

Why does UButton icon 404 error unless icon is separately pre-loaded?