README

Introduction

Vite Integration for Symfony. This bundle enables you to integrate Vite seamlessly with Symfony, similar to the symfony/webpack bundle. It extends the functionality of pentatrion/vite-bundle, adding features that are currently missing.

Getting Started

Installation

Install the bundle using Composer:

composer requ daddl3/vite-and-compress-twig-symfony-bundle

register the bundles in symfony in config/bundles.php

    Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
    daddl3\ViteAndCompressTwigSymfonyBundle\Daddl3ViteAndCompressTwigSymfonyBundle::class => ['all' => true],

Post-Installation Commands

After installing, set up Vite with the following commands:

• Install Vite config with rules and prettier

  php bin/console daddl3:install:npm-dependencies
  

Requirements

• node v20.*
• vite: ~5
• php: ^8.0
• symfony ^6.*

Usage

Implements Meta Tags

Use Twig functions as described in the Symfony Vite Documentation.

Inline CSS or JavaScript

<style>
    {{ vite_entry_file_css('critical') }}
</style>

<script>
    {{ vite_entry_file_javascript('critical') }}
</script>

Twig Filter for Minifying CSS

{% apply minifyCss | raw %}
    <style>
        body {
            background-color: grey;
        }
    </style>
{% endapply %}
    or
{{ css | minifyCss | raw }}

Configuration

Customize your Vite configuration using this template:

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

/* if you're using React */
// import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    /* react(), // if you're using React */
    symfonyPlugin(),
    babel(),
    eslintPlugin(),
  ],
  root: ".",
  base: "/build",
  publicDir: false,
  build: {
    manifest: true,
    emptyOutDir: true,
    assetsDir: "",
    outDir: "./public/build",
    rollupOptions: {
      input: {
        app: "./assets/app.js",
      },
    },
  },
});