README

💿 composer require viaaurea/vitte

Vite bridge for Latte templates (Nette).

🇸🇰/🇨🇿 Slovenská / Česká verzia readme

Usage in Latte:

  {vite main.js}
  <div id="app" />

Supports both Vite's development server and Vite-generated bundles.

Integration with Nette

Decorate Latte\Engine using ViteLatteInstaller:

# any.neon (Nette)
services:
    vite:
        class:          VA\Vitte\ViteNetteBridge
        arguments:
            path:       assets/vite-bundle              # Relative path from www dir to the manifest file
            manifest:   manifest.json                   # manifest file name
            tempFile:   vite.php                        # Each vite bundle must have a dedicated cache file.
            devUrl:     %system.vite.url%               # Default is 'http://localhost:5173'
            strict:     yes                             # You may want to turn strict mode on in development only
            basePath:   @http.paths::getBasePath()
            wwwDir:     %wwwDir%
            tempDir:    %tempDir%

decorator:
  Latte\Engine:
    setup:
      - VA\Vitte\ViteLatteInstaller()::bundle(
          @vite::makePassiveEntryLocator(
            %system.vite.development%                   # When on, serves links to Vite dev-server only
          )
        )::install(@self)

The {vite} macro is then available in the templates:

  {vite src/main.js}
  <div id="app" />

The name of the macro is configurable.

Depending on %system.vite.development% variable (replace it with whatever you are using), the macro produces tags for production or development:

<!-- PRODUCTION -->
<script type="module" src="/placeholder/assets/main.cf1f50e2.js"></script>
<script type="module" src="/placeholder/assets/vendor.5f8262d6.js"></script>
<link rel="stylesheet" href="/placeholder/assets/main.c9fc69a7.css" />

<!-- DEVELOPMENT -->
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/src/main.js"></script>

Vite configuration

Vite (vite.config.js) must be configured for correct integration:

• build.manifest must be set to true
• build.rollupOptions.input should point to the main.js (or other JS entrypoint)

Explanation and more information can be found here:

• 👉 PHP-Vite bridge building tool (Peat)
• official Vite documentation.

💡

You may also want to set build.outDir to point to a sub folder in the backend's public dir, so that you don't have to move the build files manually after each build.

Compatibility

Compatible with Vite versions v2, v3, ... v7 and above.

Please note that the default port for development server has changed since Vite v3 to 5173 from 3000 used in v2.

Latte v2.x is supported only. Newer Nette versions ship with native support for Vite assets, see nette/assets package.

Should you be interested in Latte v3 integration, let us know or send a PR.

Cache Warmup

Run this as a build step:

<?php

declare(strict_types=1);

use VA\Vitte\ViteNetteBridge;

/**
 * This script pre-generates a cache file for Vite integration.
 * Improves performance by including a PHP file instead of parsing the JSON manifest. Useful in production environments.
 */
(function () {
    $root = __DIR__ . '/../';

    /* @var $container DI\Container */
    $container = require_once $root . 'app/bootstrap.php';

    echo "Vite cache warmup: "; // echo after the container has been populated

    /** @var ViteNetteBridge $vite */
    $vite = $container->get('vite');
    $vite->populateCache();

    echo "ok\n";
})();

Multiple bundles

Vitte supports multiple Vite bundles (e.g. combining React and Vue bundles), see the ViteLatteInstaller::bundle() method.

Usage:

  {vite src/main.js vue-bundle}
  {vite src/main.js react-bundle}

Note that you need to call ViteLatteInstaller::bundle for each bundle, like this:
ViteLatteInstaller::bundle(..., 'vue-bundle')::install(@self)