How can I use qrcode FontAwesome icon in VueJS 3?

i´m new using VueJs, and I´m trying something as simple as using qrcode icon from FontAwesome, but i´m not able.

This is my package.json:

     "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.7.2",
    "@fortawesome/free-brands-svg-icons": "^6.7.2",
    "@fortawesome/free-regular-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "@fortawesome/vue-fontawesome": "^3.0.8",
...}

This is my main.js:

    import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)

const app = createApp(App)
app.use(router)
app.use(i18n)
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')

This is my component:

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
</script>
<template>
  <button class="greenButtonColor">
    {{ $t('messages.dashboard.billScan') }}>
   <!-- <font-awesome-icon icon="fa-solid fa-user-secret" /> -->
    <font-awesome-icon icon="fa-solid fa-qrcode" />
  </button>
</template>

The commented line fa-user-secret works fine. I have tried all vue options from the link provided for the icon, but everyonw gives me this error in console and I dont know how to fix it and make it woprk. ¿Any suggestions?

Thanks!

main.js:28 Could not find one or more icon(s) 
{prefix: 'fas', iconName: 'qrcode'}

You're missing faQrcode in your main.js. Just add it like this:

js

import{ faUserSecret, faQrcode } from '@fortawesome/free-solid-svg-icons'; library.add(faUserSecret, faQrcode);

Now, your component will work:

vue

<font-awesome-icon icon="fa-solid fa-qrcode" />