These steps got it working for me:
-
Install
latest-3(3.0.1) ofvue-fontawesome, which is compatible with Vue 3, and the icon dependencies:npm i --save @fortawesome/vue-fontawesome@latest-3 npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons -
In
main.js, select the icons from@fortawesome/free-solid-svg-iconsto load:import { library } from "@fortawesome/fontawesome-svg-core"; import { faPhone } from "@fortawesome/free-solid-svg-icons"; library.add(faPhone); -
Globally register the
font-awesome-iconcomponent:import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; createApp(App) .component("font-awesome-icon", FontAwesomeIcon) .mount("#app"); -
In
src/App.vue, use the component like this (note the icon name isphone, notfaPhone):<!-- explicit style --> <font-awesome-icon :icon="['fas', 'phone']" /> <!-- implicit style (fas is assumed) --> <font-awesome-icon icon="phone" />
demo