head
head copied to clipboard
vueuse
Option for ordering in head? font faces loaded before fonts are loaded, results in annoying warning
Is there any option to define an order of the head stuff? Or to define specific stuff to be loaded at the end of head?
I have the problem, that i use vueuse/head for my font face definitions in style tag and also for preloading of the fonts. But the font faces get loaded before the fonts. That results in following warning
Because there is no font face definition AFTER the font loading. It can be fixed when the style tag with font face definition is at the very end of head. But i don't find a configuration how to achieve this with vueuse/head.
I think there are use cases where the order in the head can be important.
Note: using vueuse/head with SSR
maybe you can ensure for the ordering in the head that files with preloading come first?
@antfu I'm getting bit by this issue too. I am inserting theme CSS files with useHead but they are ending up at the bottom of the head element, so they are overriding things like Tailwind. Need some sort of option to put things at the top of the head in my case.
See https://github.com/vueuse/head#render-priority
If you're server-side rendering then it should solve it. Feel free to re-open the issue if you need non-SSR support
@harlan-zw first... thank you!!! i think i need both, server side and client side support. When i check what's delivered by the server it's looking good, but than on client side it is still the other way round and still with the console warnings.
Hm okay thanks for the feedback, I'll re-open this
The issue why it's SSR only is that the patching nodes with ordering client side is not possible without doing some re-engineering of how the DOM updates work, I'll see what I can do
With any of the v1 RC versions, the client side can also be ordered.
Going to close, let me know if you have any issues with it.