Inertia Vue3 and FontAwesome 6

After a new Laravel 9 installation with Inertia, Tailwind, Breeze using Vue 3 I decided to get FontAwesome installed. I'm not using the Type Kit but a manual installation with npm.

Following all of the instructions and guides I can find. (https://fontawesome.com/docs/web/use-with/vue/) I cannot get this to work.

I've tried Googling "Inertia.js FontAwesome", "Vue3 Inertia Global Components" and others - there's what I think should work and it looks something like what I'm seeing in my googling. But when I try, I get nothing.

Here we go:

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

/* From the FontAwesome Docs */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSun, faMoon } from '@fortawesome/pro-duotone-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSun, faMoon)

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

createInertiaApp({
    title  : (title) => `${title} - ${appName}`,
    resolve: name => import(`./Pages/${name}`),
    setup({el, app, props, plugin}) {
        return createApp({render: () => h(app, props)})
            .use(plugin)
			/* Here's where I try what I *think* will work */
            .component('FontAwesomeIcon', FontAwesomeIcon) 
            .mixin({methods: {route}})
            .mount(el);
    },
});

Then in a Layout or Page or other Component (I've tried them all):

 <FontAwesomeIcon icon="fa-duotone fa-sun"  />

Then in the console, I get this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'icon')

I thought I was getting used to Vue3, it's my first time with Inertia. But now I feel like there's something basic I've missed in all I've read. Like I missed the memo with either Inertia or Vue with how things are supposed to work now. Getting FontAwesome to work in Laravel 8 with Vue 2 was a cinch. Why am I struggling so much with this? Can someone please point out the obvious thing I've done wrong?

JPrudence

4 years ago

Best Answer

Level 2

I tried that too, and got the same error.

But, for it to work, you must not use the component, I think there is incompatibility with vue3.

Just use : ex: <i class="far fa-user"></i>

and Don't forget these lines after library.add(...) :

import { dom } from "@fortawesome/fontawesome-svg-core";

dom.watch();

. .

Remove : import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' and

.component('FontAwesomeIcon', FontAwesomeIcon)

3 likes

Slothlike

4 years ago

Level 9

@ZaIhany Thanks for your reply! I can confirm your solution works.

Although, I really wanted to be able to separate the icon property from the class with the Vue component that comes with vue-fontawesome.

so:

<FontAwesomeIcon :icon="icon" :class="class" />

I may just have to make my own component for that. I wish I understood better why it didn't work. Thanks again.

Slothlike

4 years ago

Level 9

@ZaIhany Your reply got me thinking again. I had assumed compatibility with Vue3. You were right about it being incompatible. I installed vue-fontawesome 3.0.0-5 and it worked like I thought it would. They say it's just around the corner for release. I guess it pays to check the GitHub readme over the official docs. I'll have to remember to do that.

I guess this had nothing to do with Inertia in the end and now I'm not as nervous about my understanding of it.

tanyixiong27

3 years ago

Level 2

@ZaIhany Saved me! Thanks!

1 like

dhymasriyanto

3 years ago

Level 1

I think this work on me :

import './bootstrap';
import {createApp, h} from 'vue'
import {createInertiaApp} from '@inertiajs/vue3'
import "../css/app.css";
import {library} from '@fortawesome/fontawesome-svg-core';
import {faRightToBracket, faSearch} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';

library.add(faRightToBracket, faSearch);

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true})
        return pages[`./Pages/${name}.vue`]
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .component('font-awesome-icon', FontAwesomeIcon)
            .mount(el)
    },
})

Then this is on my Index.vue

<font-awesome-icon icon="right-to-bracket" />

Please or to participate in this conversation.