Vite Cannot be configured safely from a layout file #58601
Description
Laravel Version
12.49
PHP Version
8.4.13
Database Driver & Version
No response
Description
According to the doc https://laravel.com/docs/12.x/vite#advanced-customization
we can configure Vite directly from a layout file :
<!doctype html>
<head>
{{-- ... --}}
{{
Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
->useBuildDirectory('bundle') // Customize the build directory...
->useManifestFilename('assets.json') // Customize the manifest filename...
->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...
return "https://cdn.example.com/{$path}";
})
}}
</head>
But actually, when rendering a blade page which use a layout (either throught @extend directive or blade component), the page blade content is "proccessed" before the content in the layout file ...
So ... for instance if set a custom HotFile, in the layout, and use a {{ Vite::asset('resources/images/whatever.svg') }} in the blade file... It will fail because the later is called sooner...
The workaround is to set custom Vite options in a ServiceProvider ... But to me, the doc is misleading.
Steps To Reproduce
Configure Custom Vite Options in a layout file ie :
<!doctype html>
<html>
<head>
{{
Vite::useManifestFilename('custom-manifest.json') // Customize the manifest filename...
->withEntryPoints(['resources/js/app.js','resources/css/site.css']) // Specify the entry points...
}}
</head>
<body>
@yield('main_content')
</body>
<html>
And in a blade view file :
@extends('layout')
@section('main_content')
{{ Vite::asset('resources/images/whatever.svg') }} //this crash because the default manifest.json file does not exists, but it should look into the custom-manifest.json file
@endsection
(optionnaly : In your vite config file, configure the custom-manifest.json)
...
export default defineConfig({
build: {
manifest: 'custom-manifest.json',
},
...
...