Vite plugin Symfony

[!IMPORTANT] 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.

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

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.

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": "^7.0"
    }
}

Read the Docs to Learn More.

Ecosystem

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

License

MIT.