PHPackages fabricity/vite-bundle - 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. fabricity/vite-bundle ActiveSymfony-bundle[Templating & Views](/categories/templating) fabricity/vite-bundle ===================== A lightweight Symfony bundle that provides seamless Vite integration with automatic dev-server detection, manifest handling, and simple Twig helpers for loading compiled assets. 00PHPCI passing Since May 1Pushed 1mo agoCompare [ Source](https://github.com/fabricity/vite-bundle)[ Packagist](https://packagist.org/packages/fabricity/vite-bundle)[ RSS](/packages/fabricity-vite-bundle/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependenciesVersions (3)Used By (0) Fabricity Vite Bundle ===================== [](#fabricity-vite-bundle) [![Code Quality](https://github.com/fabricity/vite-bundle/actions/workflows/code-quality.yml/badge.svg?branch=main)](https://github.com/fabricity/vite-bundle/actions/workflows/code-quality.yml)[![PHPUnit](https://github.com/fabricity/vite-bundle/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/fabricity/vite-bundle/actions/workflows/tests.yml)[![PHPStan](https://camo.githubusercontent.com/71936661c994bdd70ec588a6771c605f8584906d8054c5d607a3bcc6bd943f3c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048505374616e2d6d61782d627269676874677265656e)](https://phpstan.org) A lightweight Symfony bundle that integrates [Vite](https://vitejs.dev) into your Symfony application. It automatically detects the Vite dev server, reads the production manifest, and exposes simple Twig globals for loading compiled assets. Features -------- [](#features) - Automatic Vite dev server detection - Production manifest (`manifest.json`) parsing - Multiple independent build support (e.g. `frontend` / `backend`) - Symfony Asset `VersionStrategyInterface` integration - Twig globals (`vite.dev`, `vite.devClient`) for conditional script loading Philosophy ---------- [](#philosophy) This bundle resolves asset URLs through the Vite manifest and the Symfony Asset component — nothing more. It does **not** auto-generate ``, ``, or `` tags for you. This is intentional. You stay in full control of your HTML: which assets to preload, where to place scripts, whether to add `async`, `defer`, `crossorigin`, or `integrity` attributes. The bundle gives you the correct URLs; you decide how to load them. Requirements ------------ [](#requirements) - PHP 8.4+ - Symfony 6.4, 7.4, or 8.0 Installation ------------ [](#installation) ``` composer require fabricity/vite-bundle ``` Register the bundle in `config/bundles.php`: ``` return [ // ... Fabricity\Bundle\ViteBundle\FabricityViteBundle::class => ['all' => true], ]; ``` Vite Setup ---------- [](#vite-setup) Install Vite in your project: ``` npm install --save-dev vite ``` Create a `vite.config.js` at the root of your project: ``` import {defineConfig} from 'vite' export default defineConfig({ build: { manifest: true, outDir: 'public/build/frontend', rollupOptions: { input: 'assets/main.js', }, }, server: { origin: 'http://localhost:5173', }, }) ``` Add the following scripts to your `package.json`: ``` { "scripts": { "dev": "vite", "build": "vite build" } } ``` Run `npm run dev` during development and `npm run build` for production. Configuration ------------- [](#configuration) Create `config/packages/fabricity_vite.yaml`: ``` fabricity_vite: # Path to your public directory (default: %kernel.project_dir%/public) public_dir: '%kernel.project_dir%/public' # Vite dev server URL (omit in production) server: 'http://localhost:5173' # One entry per Vite build output builds: frontend: build_dir: build/frontend # manifest_path defaults to .vite/manifest.json backend: build_dir: build/backend ``` Each entry under `builds` registers a Symfony Asset version strategy service named `fabricity_vite.version_strategy.`. ### Multiple builds [](#multiple-builds) You can define as many builds as you need. This is useful when you have separate Vite configs for different parts of your application. Twig integration ---------------- [](#twig-integration) The bundle registers a Twig extension that exposes a global `vite` variable: VariableTypeDescription`vite.dev``bool``true` when the Vite dev server is reachable`vite.devClient``string|null`URL to the Vite HMR client (`/@vite/client`)Use it in your base template to conditionally load the dev client: ``` {% if vite.dev %} {% endif %} ``` Asset version strategy ---------------------- [](#asset-version-strategy) Register the bundle's version strategy on a Symfony Asset package in `config/packages/assets.yaml`: ``` framework: assets: packages: frontend: version_strategy: 'fabricity_vite.version_strategy.frontend' backend: version_strategy: 'fabricity_vite.version_strategy.backend' ``` Then use the standard Symfony `asset()` helper in Twig: ``` {# In dev mode: points to http://localhost:5173/src/main.js #} {# In prod mode: resolves via manifest to /build/frontend/assets/main-abc123.js #} ``` ### CSS co-located with JS [](#css-co-located-with-js) When Vite bundles CSS alongside a JS entry point, you can reference the CSS file using its `.css` extension even though it is listed under a `.js` key in the manifest: ``` ``` The bundle automatically resolves `src/app.css` → `src/app.js` → `css[0]` from the manifest. Full example ------------ [](#full-example) ``` {# templates/base.html.twig #} {% block body %}{% endblock %} {% if vite.dev %} {% endif %} ``` License ------- [](#license) MIT — see [LICENSE](LICENSE). ### Health Score 20 — LowBetter than 13% of packages Maintenance61 Regular maintenance activity Popularity0 Limited adoption so far Community6 Small or concentrated contributor base Maturity14 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/10576303?v=4)[David mattei](/maintainers/Davidmattei)[@Davidmattei](https://github.com/Davidmattei) --- Top Contributors [![Davidmattei](https://avatars.githubusercontent.com/u/10576303?v=4)](https://github.com/Davidmattei "Davidmattei (14 commits)") ### Embed Badge ![Health badge](/badges/fabricity-vite-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/fabricity-vite-bundle/health.svg)](https://phpackages.com/packages/fabricity-vite-bundle) ``` ### Alternatives [limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3861.2M](/packages/limenius-react-bundle)[wmde/php-vuejs-templating PHP implementation of Vue.js templating engine 3041.6k2](/packages/wmde-php-vuejs-templating)[jelix/wikirenderer WikiRenderer is a library to generate HTML or anything else from wiki content. 1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects. 291.8k](/packages/webkinder-sproutset) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)