Hot reloading with Vite code optimization

Hello, I've managed to to (finally) set up hot reloading with Vite. However, I've been wondering whether I'm doing it correctly and performance-wise. Right now, in order to enable hot reloading option, I add the following line to every .blade file, for example:

@vite('resources/js/app.js')
<div>
    <h1>Hello World!</h1>
</div>

Is that a correct way to do this? Isn't that leading the unnecessary code repetition?

experimentor

1 year ago

Level 25

@pehape You don't need to add @vite in all blade files. Add it only in the layout files. Probably app.blade.php. If you scaffolded laravel as per documentation, it should already be added. Here is the app.blade.php from a breeze(inertia+vue) application.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

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

You can see the scripts added in the tag.

Please or to participate in this conversation.