About using FontAwesome’s CDN in a Vue app
Hey everybody! I’m very excited about posting this cause it’s my first post on Medium.
I don’t wanna bore you with a presentation of myself, so let’s dive in.
As you surely noticed, in this article we’re going to talk about using FontAwesome’s CDN on a Vue.js application.
TL;DR: dont use the JS version of FontAwesome’s CDN in your Vue.js app.
For example, if you need to display an icon based on a Vue.js variable, it won’t work as expected.
I’m building a real-time chat in Vue so I decided to add an icon to send some feedback to user about messages status.
Right after the user sends a message, I wanted to display a clock (like WhatsApp) until the API saves it. Something like this:
And then, when the API has saved the message, change it to a check (again, like WhatsApp).
Here I noticed that something wasn’t working as I expected, cause the icon doesn’t change.
At first I thought it had broken somehow Vue’s reactivity but after reviewing the code and analyzing the behavior (using devtools) I realized that the property was being updated correctly.
After this, I took a long coffee break to think about it and then an idea came directly to my mind: what if the problem isn’t Vue?
I came to my computer and switched from FontAwesome’s JS version to CSS version.
And voilà! It worked.
I don’t know if this an “expected behavior” (very weird) but it really blowed up my mind.
Want to live this horrible experience?
- Fiddle with FontAwesome JS version (scary one)
- Fiddle with FontAwesome CSS version (friendly one)
And thats all for now! Thanks for reading!
P.D: I’m not a native english speaker so post’s content could have some errors so I apologize :)