Laravel, Vue 3, SSR and font awesome icons

[oxygemthe]

Hello, I have a problem using font awesome icons in Vue.js 3. Without ssr, all icons are rendered on the client, but it doesn't work on the server.

Code in the ssr.js:

import { createSSRApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import createServer from "@inertiajs/vue3/server";
import { renderToString } from "@vue/server-renderer";
import { ZiggyVue } from '../../../vendor/tightenco/ziggy/dist/vue.m'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
    faArrowUpRightFromSquare,
    faCircleNotch,
    faMagnifyingGlass,
    faPhone,
    faRightToBracket
} from "@fortawesome/free-solid-svg-icons";

import.meta.glob([
    '../images/**',
    '../fonts/**',
]);

library.add(faRightToBracket, faCircleNotch, faPhone, faMagnifyingGlass, faArrowUpRightFromSquare);

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .component('font-awesome-icon', FontAwesomeIcon)
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
        }
    })
);

package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.8.0",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.4.2",
        "@fortawesome/free-brands-svg-icons": "^6.4.2",
        "@fortawesome/free-regular-svg-icons": "^6.4.2",
        "@fortawesome/free-solid-svg-icons": "^6.4.2",
        "@fortawesome/vue-fontawesome": "^3.0.3",
        "@inertiajs/vue3": "^1.0.11",
        "@vitejs/plugin-vue": "^4.3.3",
        "@vue/server-renderer": "^3.3.4",
        "fontawesome-free": "^1.0.4",
        "less": "^4.2.0",
        "nprogress": "^0.2.0",
        "slug": "^8.2.3",
        "tinymce": "6.2.0",
        "vue": "^3.3.4"
    }
}

composer.json:

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The skeleton application for the Laravel framework.",
    "keywords": ["laravel", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "inertiajs/inertia-laravel": "^0.6.10",
        "intervention/image": "^2.7",
        "laravel/framework": "^10.10",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8",
        "spatie/laravel-sluggable": "^3.5",
        "tightenco/ziggy": "^1.6"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.9",
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.1",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}

[cv-chameleon]

@oxygemthe why did you close this issue, were you able to fix it? If so, how?

I'm facing the same issue, tried some suggestions from the Nuxt repository, but no success.

Thanks in advance for help.

[oxygemthe]

@oxygemthe why did you close this issue, were you able to fix it? If so, how?

I'm facing the same issue, tried some suggestions from the Nuxt repository, but no success.

Thanks in advance for help.

Hello, @cv-chameleon. I solved it, see there: https://github.com/FortAwesome/vue-fontawesome/issues/476#issuecomment-1752140842

[cv-chameleon]

@oxygemthe why did you close this issue, were you able to fix it? If so, how? I'm facing the same issue, tried some suggestions from the Nuxt repository, but no success. Thanks in advance for help.

Hello, @cv-chameleon. I solved it, see there: FortAwesome/vue-fontawesome#476 (comment)

Thanks for the quick answer! You made my day, was looking for a few hours already trying to solve this :)