Setup Fontawesome di Vue 3 (Laravel & Inertia) menggunakan vue-fontawesome

Fontawesome adalah librari penyedia Icon yang sudah banyak di gunakan khusunya oleh pengembang Website. Fontaweome menyediakan versi gratis yang dapat kita gunakan secara gratis dan ada juga versi premium atau berbayar yang tentunya memiliki lebih banya Icon di banding yang versi gratis.

Kali ini saya akan membagikan tutorial cara Setup Fontawesome di Project Vue 3 dengan menggunakan Framework Laravel + Inertia JS.

Pertama pastikan kita sudah memiliki project Laravel + Inertia JS, kalau belum silahkan lihat tutorial di Tutorial Install Laravel Jetstream.

Kemudian install Fontawesome menggunakan NPM atau Yarn

yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/fontawesome-svg-core

atau menggunakan NPM

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/fontawesome-svg-core

kemudian buka dan edit file app.js

kemudian tambahkan kode

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch();

dan buat component

.component("font-awesome-icon", FontAwesomeIcon)

Berikut ini full code app.js

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch();

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .component("font-awesome-icon", FontAwesomeIcon)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#03A9F4' });

Proses setup sudah selesai, selanjutnya kita coba test dengan buka misal di Welcome.vue atau component yang lain

<font-awesome-icon icon="address-card"><font-awesome-icon/>

component di atas sama dengan

<i class="fas fa-address-card"></i>