1. Install your Pro kit with your package manager

2. Create a Nuxt plugin under (plugin/fontawesome.client.ts/js)

3. Add fontawesome css to nuxt.config.ts

Plugin

import { defineNuxtPlugin } from 'nuxt/app'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@awesome.me/your-kit/icons'
import { far } from '@awesome.me/your-kit/icons'
import { fal } from '@awesome.me/your-kit/icons'
import { fak } from '@awesome.me/your-kit/icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas,far,fal,fak)

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('icon', FontAwesomeIcon)
})

**
Nuxt.config.ts**

export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    devtools: {
        enabled: true,

        timeline: {
            enabled: true
        }
    },
    css: [
        '/assets/css/main.css',
        '@fortawesome/fontawesome-svg-core/styles.css'
    ]
})

**
How to use**

<icon :icon="['fas', 'house']" />
<icon :icon="['far', 'house']" />
<icon :icon="['fal', 'house']" />
<icon :icon="['fak', 'custom-icon-name']" />