PHPackages                             viaaurea/vitte - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. viaaurea/vitte

ActiveLibrary[Templating & Views](/categories/templating)

viaaurea/vitte
==============

1.0(10mo ago)035MITPHPPHP ^7.4 || ^8

Since Apr 16Pushed 10mo ago2 watchersCompare

[ Source](https://github.com/viaaurea/vitte)[ Packagist](https://packagist.org/packages/viaaurea/vitte)[ RSS](/packages/viaaurea-vitte/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (2)Versions (6)Used By (0)

Vitte: Latte-Vite bridge
========================

[](#vitte-latte-vite-bridge)

> 💿 `composer require viaaurea/vitte`

Vite bridge for Latte templates (Nette).

> [🇸🇰/🇨🇿 Slovenská / Česká verzia readme](readme.cs+sk.md)

Usage in Latte:

```
  {vite main.js}

```

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

Integration with Nette
----------------------

[](#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}

```

> 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:

```

```

Vite configuration
------------------

[](#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)](https://github.com/dakujem/peat#vite)
- [official Vite documentation](https://vitejs.dev/guide/backend-integration.html).

> 💡
>
> 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
-------------

[](#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
------------

[](#cache-warmup)

Run this as a build step:

```