Using Font Awesome in Vue3 with Bulma - html

Question

How should Font Awesome be used with Vue? I have vue-fontawesome added to my project, as well as Bulma, so am I supposed to intermix the two? Or choose one or the other? I would like to be able to use Bulma's classes for coloring the icons.
Vue-fontawesome shows using this syntax:
<font-awesome-icon icon="address-card" />
and Bulma shows using this syntax:
<span class="icon">
<i class="fas fa-home"></i>
</span>
Questions:
If I am supposed to intermix the two, how should the html syntax look?
If I can only choose one or the other, what would be the limitations of each?

Answer 1

<font-awesome-icon> is just a convenience component. When you check your resulting HTML, you will find it renders <i class="fas fa-home"></i>.
The above statement is of course really simplified. In my projects I am using the SVG icons, so <font-awesome-icon> will render as <svg>...</svg>.
Bulma's HTML provides a container to put an arbitrary icon into it. That can be Font Awesome, but it can also be something else. It just provides the layout.
With that in mind, I would answer your questions:
Just put the icon (Font Awesome) into the container (Bulma)
<span class="icon">
<font-awesome-icon icon="address-card" />
</span>
To color the icon, Bulma's helpers work just fine:
<span class="icon has-text-danger">
<font-awesome-icon icon="exclamation" />
</span>
Does not apply, since both of them serve different purposes and complement each other.

Answer 2

Install Font Awesome package
npm install --save #fortawesome/fontawesome-free
Then load its CSS files
import '#fortawesome/fontawesome-free/css/all.min.css'
Example loading it globally
// Vue.js 3
import { createApp } from 'vue'
import App from './App.vue'
import "bulma/bulma.sass"
import '#fortawesome/fontawesome-free/css/all.min.css'
createApp(App).mount('#app')
Its is an Vue 3 example, but should work the same way on Vue 2 apps if the same steps are followed.