PHPackages                             bechir/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. [Utility & Helpers](/categories/utility)
4. /
5. bechir/vite-bundle

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

bechir/vite-bundle
==================

Integrate Vite.js into your Symfony application

1.0(4y ago)113MITPHPPHP >=7.2.0

Since Oct 6Pushed 4y ago1 watchersCompare

[ Source](https://github.com/bechir/vite-bundle)[ Packagist](https://packagist.org/packages/bechir/vite-bundle)[ Docs](https://github.com/bechir/vite-bundle)[ RSS](/packages/bechir-vite-bundle/feed)WikiDiscussions main Synced 6d ago

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

This bundle allows you to integrate Vite into your Symfony application by using [WebpackEncoreBundle](https://symfony.com/doc/current/frontend.html) and [ViteFait](https://www.npmjs.com/package/vite-fait)

Installation
============

[](#installation)

Make sure [Node](https://nodejs.org/en/download/) and a package manager ([Yarn](https://yarnpkg.com/getting-started/install)) are installed.

### Step 1: Download the Bundle

[](#step-1-download-the-bundle)

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

```
$ composer require bechir/vite-bundle
```

### Step 2: Enable the Bundle

[](#step-2-enable-the-bundle)

Then, enable the bundle by adding it to the list of registered bundles in the `config/bundles.php` file of your project:

```
// config/bundles.php

return [
    // ...
    Bechir\ViteBundle\BechirViteBundle::class => ['dev' => true],
];
```

Add the bundle configuration in `config/packages/bechir_vite.yaml`:

```
bechir_vite:
  output_path: '%kernel.project_dir%/public/dist'
```

### Step 3: Install ViteFait

[](#step-3-install-vitefait)

```
# using yarn
yarn add --dev vite-fait
# using npm
npm install vite-fait --save-dev
```

Usage
=====

[](#usage)

Create `vite.config.js` in the root folder and add the following code inside the file:

```
const ViteFait = require('vite-fait');

ViteFait
  .setRoot('assets')
  .setOutputPath('../public/dist')
  .addEntry('app', './assets/app.js')
  .addEntry('admin', './assets/admin/app.js');

module.exports = ViteFait.getViteConfig()
```

Add vite-fait scripts in your `package.json`

```
{
  "scripts": {
    "build": "vite-fait build",
    "dev": "vite-fait dev",
  }
}
```

Then run your first build with `yarn build` or `npm run build`It generate `entrypoints.json` file in `public/dist`:

```
{
  "entrypoints": {
    "app": {
      "js": [
        "/dist/app.7f38ab96.js"
      ],
      "css": [
        "/dist/app.c385b6b3.css"
      ]
    },
    "admin": {
      "js": [
        "/dist/admin.a88436ae.js"
      ],
      "css": [
        "/dist/admin.0e68df5b.css"
      ]
    }
  }
}
```

Add the twig functions in `templates/base.html.twig`:

```

    {{ vite_entry_link_tags('app') }}

    {{ vite_entry_script_tags('app') }}

```

[Read the vite docs](https://vitejs.dev) for more information

Using Plugins
-------------

[](#using-plugins)

> Read [how to use vite plugins](https://vitejs.dev/guide/using-plugins.html) first before reading this section

Put your plugins inside the `usePlugins` method:

```
const fooPlugin = function() {
  return {
    name: 'vite-plugin-foo',
    configureServer() {
      console.log('foo');
    }
  }
}

ViteFait
  .usePlugins(fooPlugin()) // use array for multiple plugins: [fooPlugin(), barPlugin()]
```

TODO
====

[](#todo)

- Add tests
- React support
- Vue support
- Documentation

###  Health Score

22

—

LowBetter than 22% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 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.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1684d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/60dadb56e7291b03671b269f64a20f552924f514eb24ace16e39ffc5c17fd5d0?d=identicon)[bechirba](/maintainers/bechirba)

---

Top Contributors

[![bechir](https://avatars.githubusercontent.com/u/13308700?v=4)](https://github.com/bechir "bechir (1 commits)")

### Embed Badge

![Health badge](/badges/bechir-vite-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/bechir-vite-bundle/health.svg)](https://phpackages.com/packages/bechir-vite-bundle)
```

###  Alternatives

[odiseoteam/sylius-blog-plugin

This plugin add blog capabilities to your Sylius project

37104.5k](/packages/odiseoteam-sylius-blog-plugin)[dedi/sylius-seo-plugin

Sylius SEO plugin by Dedi.

28138.9k](/packages/dedi-sylius-seo-plugin)[tilleuls/sylius-click-n-collect-plugin

Click and Collect plugin for Sylius, to sell and deliver securely during the COVID-19 pandemic.

7814.2k](/packages/tilleuls-sylius-click-n-collect-plugin)[odiseoteam/sylius-report-plugin

Plugin for Sylius to make customizable reports.

3275.4k](/packages/odiseoteam-sylius-report-plugin)[bitbag/product-bundle-plugin

Product bundle for Sylius.

2174.4k](/packages/bitbag-product-bundle-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)