PHPackages                             sirix/twig-vite-extension - 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. sirix/twig-vite-extension

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

sirix/twig-vite-extension
=========================

Inject your vite entry points into twig templates with easy.

1.0.0(8mo ago)015MITPHPPHP ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0CI passing

Since Sep 2Pushed 8mo agoCompare

[ Source](https://github.com/sirix777/twig-vite-extension)[ Packagist](https://packagist.org/packages/sirix/twig-vite-extension)[ RSS](/packages/sirix-twig-vite-extension/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (8)Versions (3)Used By (0)

Twig Vite Extension
===================

[](#twig-vite-extension)

Inject your Vite entry points into Twig templates with ease.

This library provides a Twig extension that:

- In development: injects @vite/client and your entry as module scripts, and resolves asset URLs to the dev server.
- In production: reads Vite's manifest.json and renders the correct built asset tags and URLs.

It can be used:

- With Mezzio (Laminas) via the provided ConfigProvider and factories.
- Standalone, without Mezzio, by manually wiring the services.

Installation
------------

[](#installation)

Composer:

```
composer require sirix/twig-vite-extension
```

Requirements: PHP 8.1+.

Note on public vs filesystem paths:

- Set `vite_build_dir` to where Vite writes the build on disk (e.g., `public/build`).
- Set `vite_public_base` to how that directory is exposed publicly (e.g., `build` so URLs become `/build/...`).
- If you omit `vite_public_base`, the library falls back to using `vite_build_dir` in URLs.

Vite configuration (required)
-----------------------------

[](#vite-configuration-required)

Ensure Vite generates a manifest and places build output where your app can serve it.

Example vite.config.ts:

```
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  build: {
    manifest: true,
    outDir: 'public/build', // must match vite_build_dir in your PHP config
    assetsDir: 'assets',
    rollupOptions: {
      input: {
        app: path.resolve(__dirname, 'resources/js/app.ts'),
      },
    },
  },
  server: {
    // Your dev server URL should match dev_server in your PHP config
    port: 5173,
    strictPort: true,
  },
})
```

Notes:

- In production, this library looks for `{vite_build_dir}/.vite/manifest.json` (e.g., `public/build/.vite/manifest.json`).
- The keys in manifest must match the entry names you pass in Twig (e.g., `resources/js/app.ts`).

Twig functions provided
-----------------------

[](#twig-functions-provided)

- `vite_entry_script_tags(entry)` → string

    - Dev: outputs two <script type="module"> tags (@vite/client and your entry).
    - Prod: outputs a single <script type="module"> tag for the built file and tags for imports.
    - Output is marked safe for HTML.
- `vite_entry_link_tags(entry)` → string

    - Dev: returns empty string (CSS is injected by Vite in dev).
    - Prod: outputs one or multiple tags for CSS emitted by the entry.
    - Output is marked safe for HTML.
- `vite_asset(path)` → string

    - Dev: returns `${dev_server}/${path}` (slashes handled), so assets are served from the Vite dev server.
    - Prod: resolves `path` via the manifest and returns a URL based on `vite_public_base` when set, otherwise `vite_build_dir`.
    - If `path` is not found in manifest (e.g., a static image not processed by Vite), it returns the original `path` unchanged.

### Examples

[](#examples)

Twig:

```
{# Entry points #}
{{ vite_entry_script_tags('resources/js/app.ts') }}
{{ vite_entry_link_tags('resources/js/app.ts') }}

{# Referencing a processed asset from manifest #}

{# Referencing a static file that Vite did not fingerprint #}

```

Notes:

- In production, if you want URLs like `/build/...` (without `public/`), configure `vite_public_base: 'build'`.
- If you set `vite_public_base` to the same value as `vite_build_dir`, URLs will look like filesystem paths (used by our tests).

Configuration options
---------------------

[](#configuration-options)

Options map to `Sirix\TwigViteExtension\Vite\ViteOptions`:

- `is_dev_mode` (bool) — default: `false`
- `vite_build_dir` (string|null) — default: `public/build` (filesystem directory where Vite writes the build)
- `vite_public_base` (string|null) — default: `build` (public URL base used when rendering tags/URLs; if null, falls back to `vite_build_dir`)
- `dev_server` (string|null) — default: `http://localhost:5173`

Behavior:

- In production (`is_dev_mode = false`), the library loads the manifest once from `{vite_build_dir}/.vite/manifest.json`.
- In production, public URLs are built using `vite_public_base` when set, otherwise `vite_build_dir`.

Usage with Mezzio (Laminas)
---------------------------

[](#usage-with-mezzio-laminas)

This package ships a `ConfigProvider` that registers all required factories.

1. Enable configuration (if you use laminas-component-installer, this is automatic). Otherwise, ensure your `composer.json` has:

```
{
  "extra": {
    "laminas": {
      "config-provider": "Sirix\\TwigViteExtension\\ConfigProvider"
    }
  }
}
```

2. Provide options in a config file, e.g. `config/autoload/vite.config.global.php`:

```