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>