Vite Asset

vite-assets.blade.php

@if (app()->environment('local'))
  @push('scripts')
  <script nonce="{{ csp_nonce() }}" type="module" src="//{{ request()->getHost() }}:3000/dist/@vite/client"></script>
  <script nonce="{{ csp_nonce() }}" type="module" src="//{{ request()->getHost() }}:3000/dist/{{ $name }}"></script>
  @endpush
@else
  @php
    $assets = App\Services\Vite\ViteAssetsTransformer::transform($name);
  @endphp

  @push('scripts')
  <script nonce="{{ csp_nonce() }}" type="module" src="{{ '/dist/' . $assets['js'] }}"></script>
  @endpush

  @push('styles')
  @foreach ($assets['preloads'] as $preload)
  <link rel="modulepreload" as="script" crossorigin href="{{ '/dist/'. $preload }}">
  @endforeach
  @foreach ($assets['dynamic_imports'] as $dynamic_import)
  <link rel="modulepreload" as="script" crossorigin href="{{ '/dist/'. $dynamic_import }}">
  @endforeach
  @foreach ($assets['css'] as $css)
  <link href="{{ '/dist/' . $css }}" rel="stylesheet">
  @endforeach
  @endpush
@endif

ViteAssetTransformer.php

<?php

namespace App\Services\Vite;

use Illuminate\Support\Str;

class ViteAssetsTransformer
{
    public static function transform($entry)
    {
        // 1. Parse manifest.json
        $manifest_string = json_decode(file_get_contents(public_path('/dist/manifest.json')), true);

        // 2. Transform to flat array
        $manifest_array = collect($manifest_string)
            ->flatMap(fn ($values) => [$values]);

        // 3. Filter by src= and isEntry=true
        $manifest = $manifest_array
            ->firstWhere('src', $entry);

        // 4. Get JS entry + css
        $js = $manifest['file'];
        $css = isset($manifest['css']) ? $manifest['css'] : [];

        // 5. Get Imports file as preload
        if (isset($manifest['imports'])) {
            $preloads = collect($manifest['imports'])
                ->transform(function ($item) {
                    return Str::startsWith($item, '_')
                        ? Str::substr($item, 1, Str::length($item))
                        : $item;
                })
                ->map(fn ($item) => 'assets/' . $item);
        }

        // 6. Get dynamicImport file as dynamic_imports
        if (isset($manifest['dynamicImports'])) {
            $dynamic_imports = $manifest_array
                ->whereIn('src', collect($manifest['dynamicImports']))
                ->flatMap(fn($values) => [$values])
                ->pluck('file');
        }

        return [
            'js' => $js,
            'css' => $css
        ];
    }
}