Vite plugin Symfony

A Vite plugin to easily integrate Vite into your Symfony application.

• create a entrypoints.json file inside your build directory with your js/css/preload dependencies.
• reload your browser when you update your twig files

This package is intended for use with the Symfony Bundle : pentatrion/vite-bundle.

⚠️ This repository is a "subtree split": a read-only subset of that main repository symfony-vite-dev which delivers to packagist only the necessary code.

If you want to open issues, contribute, make PRs or consult examples you will have to go to the symfony-vite-dev repository.

Installation

npm i vite-plugin-symfony

Create this directory structure :

├──assets
│ ├──app.js
│ ├──app.css
│...
├──public
├──composer.json
├──package.json
├──vite.config.js

Vite base config with vite

// vite.config.js
import {defineConfig} from "vite";
import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
    plugins: [
        symfonyPlugin(/* options */),
    ],

    build: {
        rollupOptions: {
            input: {
              app: "./assets/app.js" /* relative to the root option */
            },
        },
    }
});

and your package.json :

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "vite": "^5.0",
        "vite-plugin-symfony": "^6.4"
    }
}

Read the Docs to Learn More.

Ecosystem

Package	Description
vite-bundle	Symfony Bundle (read-only)
vite-plugin-symfony	Vite plugin (read-only)
symfony-vite-dev	Package for contributors

License

MIT.