Iconify endpoint for local collections fails because rendering mode is client-side only
noook opened this issue · comments
I am using @nuxt/icon
in a Nuxt app where the rendering mode is client-side only. According to the documentation:
By default, this module will create a server endpoint /api/_nuxt_icon/:collection to serve the icons from your local server bundle
However there shouldn't be an api
directory in this situation as it is bundled under the server
directory and this one is not used for client-side only apps
This results in the app makign a request to https://<host>/api/_nuxt_icon/tri.json?icons=paperplane
, this returns the Nuxt's 404 error page, then it makes a request to https://api.iconify.design/tri.json?icons=paperplane
Is that supposed to happen ? Or does the application need additional configuration for this usecase ?
Do you see ssr: false
? Nuxt Icon works mainly with the server, on ssr:false
it will fallback to Iconify's public API, which does not have your custom icon. I am not sure if there would be a solution to that, or we might need to update the docs to make it clear (that custom icons only works with a server)
What do you mean by "Do you see" ? ssr: false
is how I achieve the client-side only rendering mode so this is supposedly the only thing I set to achieve this behaviour
Okay, I understand. We are effectively dealing with custom icons, not many so we could easily turn them into inline svgs. So I guess for the moment the best thing to do is to update the documentation to explicit this constraint.
These is a vague idea and I haven't checked the implementation behind custom icon collection, but perhaps during the build phase we could detect the rendering mode, and move the icon assets into the public folder instead of the API folder.
I guess there is a little bit more to this, but if the icons can be statically detected at build time we could just insert them in the build ?
The point of Nuxt Icon is to handle dynamic icons loading. We couldn't statically detect the case of <Icon :icon="name" />
. For static, built-time solution I would recommend using UnoCSS's icon preset along side
I may be seeing this same issue. I'm doing nuxt generate
to generate a static site, and the icons don't show up (they are fine in dev mode). I installed the icon uil
module locally. But I don't see any way /api/_nuxt_icon/uil.json?icons=moon%2Csun
could return a useful result -- it gives a 404.
My nuxt/vue component just has <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
Is there any update on this? It seems this package does not work when running nuxt generate
. Interestingly, it seems icons appear in components that are not within the nuxt-page
component in my app.vue
. For instance, my header.vue
and footer.vue
icons appear, but all icons with my pages
(and the components that make up them), do not appear.
Update: I switched my site to SSR and the icons are working now!
I have the same (or similar) issue. On first load, the icons show up on the page I visit, but if I navigate to another page on my app, I get a 404. If I refresh this page, the icons show up and the 404 is not thrown. Navigating to other pages repeats this behaviour consistently. Strange behaviour.
GET /api/_nuxt_icon/mdi.json?icons=alert-decagram%2Carrow-left-circle-outline%2Ccalculator-variant%2Crobot-excited-outline%2Cvideo-input-antenna 404 (Not Found)
Running nuxt 3.12.3 and @nuxt/icon 1.0.0. The below is a snippet from nuxt.config.ts. I create the app using nuxt build
and the serve the output. I have other routes apart from the ones listed below which load dynamic data.
ssr: true,
nitro: {
prerender: {
routes: [
'/about',
'/blog/all',
'/blog/the-creation',
]
}
},
routeRules: {
'/blog/**': { prerender: true },
},
I may be seeing this same issue. I'm doing
nuxt generate
to generate a static site
Sorry because I know it's not related to the original question (about custom collections), but I was having this same issue @garyo mentioned with SSG. My solution was to use nuxi build
instead (not purely static anymore). I was using Netlify and it worked with minimal configuration. See https://nuxt.com/deploy/netlify.
My solution was to use
nuxi build
instead (not purely static anymore)
Sure, why not add a back end to the static site just to fetch icons?! (I thought about that too, but couldn't go that far)
My solution was to use nuxi build instead (not purely static anymore). I was using Netlify and it worked with minimal configuration.
Hi @gangsthub, could you please elaborate a bit how you fixed it. I am running into same problem.
I tried:
nuxi build
node .output/server/index.mjs -> does not work on local setup
./node_modules/.bin/nuxi start -> this work on local setup
but deployed on Netlify, it does not work.
could you please elaborate a bit how you fixed it
@rajatjindal, when changing from nuxi generate
to nuxi build
you will have to change the build commands in your Netlify/Vercel/etc configuration. You can see mine here:
https://github.com/gangsthub/graficos.net/blob/3f28a753714590812d8e893ff623f008f71c9753/netlify.toml
(The fact that I'm using pnpm should be irrelevant in this context)
I linked the docs for deploying in Netlify because that's the platform I'm currently using and I'm only using the default configuration.
But, as @antfu said, I'd try to use the static build again with the latest version after de92533 😉