1. Install prelease (3.0.0-4) of vue-fontawesome, which is compatible with Vue 3, and the icon dependencies:

npm i --save @fortawesome/vue-fontawesome@prerelease
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

2. In main.js, select the icons from @fortawesome/free-solid-svg-icons to load:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";

library.add(faPhone);

3. Globally register the font-awesome-icon component:

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

createApp(App)
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");

4. In src/App.vue, use the component like this (note the icon name is phone, not faPhone):

<!-- explicit style -->


<!-- implicit style (fas is assumed) -->

other alternatives
1. Create folder utilities-> fontawesome.js, Then Add :

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import { faFlag } from "@fortawesome/free-solid-svg-icons";

library.add(faPhone);
library.add(faUser);
library.add(faFlag);

export default FontAwesomeIcon;

Then in your main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import "@/assets/css/main.scss";
import router from "./router";
import store from "./store";
import FontAwesomeIcon from "@/utilities/fontawesome";

createApp(App)
    .component("font-awesome-icon", FontAwesomeIcon)
    .use(store)
    .use(router)
    .mount("#app");