Custom attributes on <script> and <link> tags

Custom attributes can be added to rendered <script> or <link> tags in 3 different ways (by order of priority):

• Via global config (script_attributes et link_attributes): see the Vite bundle reference.

• When rendering in Twig - see the Twig functions.

• By listening to the Pentatrion\ViteBundle\Event\RenderAssetTagEvent (source code) event.

Here is a complete example configuration:

Global attributes

# config/packages/pentatrion_vite.yaml
pentatrion_vite:
    script_attributes:
        foo: bar

Local attributes

{{ vite_entry_script_tags('app', {
  attr: {
    hello: 'world'
  }
}) }}

Subscribe to RenderAssetTagEvent 🧩

// src/EventSubscriber/ScriptNonceSubscriber.php
namespace App\EventSubscriber;

use Pentatrion\ViteBundle\Event\RenderAssetTagEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class ScriptNonceSubscriber implements EventSubscriberInterface
{
    public function onRenderAssetTag(RenderAssetTagEvent $event)
    {
        $tag = $event->getTag();
        if ($tag->isInternal()) {
            return;
        }
        if ($tag->isScriptTag() && $event->isBuild()) {
            $tag->setAttribute('nonce', 'lookup nonce');
        }
        $tag->setAttribute('foo', 'bar-modified');

        // you can retrieve the name of the original entry point here
        $origin = $tag->getOrigin();

        // you want to disable the preload HTTP header for all scripts
        // for the app entry point.
        if (
          $tag->getOrigin() === "app"
          && $tag->isPreload()
          && $tag->isRenderAsLinkHeader()
        ) {
          $tag->setRenderAsLinkHeader(false);
    }


    public static function getSubscribedEvents()
    {
        return [
            RenderAssetTagEvent::class => 'onRenderAssetTag',
        ];
    }
}

Result

You will get this:

<script
  type="module"
  src="/build/assets/app-dc399f15.js"
  foo="bar-modified"
  hello="world"
  nonce="lookup nonce"
></script>