Inertia React and Vite | how to add a new asset?

I'm new to Inertia. I've installed Breeze-React on Laravel 11, and I want to add some custom CSS and JS libs to some pages. With Livewire I used to add myViteFiles.js to vite.config.js, then add @vite() directives to my blade Views. Now with React I'd like to do the same but for my React components. I can't find out how to do that in the Inertia Doc. Thanks

app.blade.php | OK for global assets

 <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>

Edit.jsx | how do I add @vite( ..) for this layout?

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import DeleteUserForm from './Partials/DeleteUserForm';
import UpdatePasswordForm from './Partials/UpdatePasswordForm'; 
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';

export default function Edit({ qrimage,mustVerifyEmail,recovery_codes, status  }) {
    return (
        <AuthenticatedLayout
            header={
                <h2 className="text-xl font-semibold leading-tight text-gray-800">
                    Profile
                </h2>
            }  
        >
            <Head title="Profile" />

            <body>

Sinnbeck

1 year ago

Level 102

Vite is in the blade file not in react. So it should already be working. What exactly are you trying to add here? If you want to import a function, just export it from the other file

alex32

1 year ago

Best Answer

Level 2

Thanks, I found out how to import a css , in particular font-awesome.

https://docs.fontawesome.com/web/use-with/react

Please or to participate in this conversation.