Name: Laravel 11: Vite in Twig (rcrowe/TwigBridge)
Rating: 3.3 (5481 reviews)
Author: ordigital

Laravel 11: Vite in Twig (rcrowe/TwigBridge)

Adam Mateusz Brożyński - Jul 1 -

- Dev Community

This registers vite tag to Twig that allows to dynamically link css and js (works for dev and prod):

{{ vite('resources/css/app.scss')|raw }}
{{ vite('resources/css/app.js')|raw }}

1. Create new Twig extension:

app/Twig/TwigExtension.php:

<?php
namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
use Twig\Markup;
use Illuminate\Foundation\Vite;

class TwigExtension extends AbstractExtension
{
    public function getFunctions(): array
    {
        return [
            new TwigFunction('vite', [$this, 'vite']),
        ];
    }

    public function vite(string $resource): string
    {
        return new Markup((new Vite)->__invoke($resource),'UTF-8');
    }
}

2. Generate config:

php artisan vendor:publish --provider="TwigBridge\ServiceProvider"

3. Add extension to config:

app/config/twigbridge.php:

        'enabled' => [
            ... 
            'App\Twig\TwigExtension',
        ],