daddl3 / vite-and-compress-twig-symfony-bundle
Vite Bundle for Symfony with configs and twig compression
1.0.0
2024-08-24 12:33 UTC
Requires
- php: ^8.3
- ext-dom: *
- ext-libxml: *
- pentatrion/vite-bundle: ^6 | ^7
- symfony/config: ^6.0 | ^7
- symfony/console: ^6.3 | ^7
- symfony/dependency-injection: ^6.0 | ^7
- symfony/framework-bundle: ^6.0 | ^7
- symfony/http-client: ^6.0 | ^7
- symfony/http-kernel: ^6.0 | ^7
- symfony/monolog-bundle: ^3.10
- symfony/process: ^6.3 | ^7
- symfony/twig-bundle: ^6.0 | ^7
Requires (Dev)
- phpstan/phpstan: ^1.10
- roave/security-advisories: dev-latest
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",
},
},
},
});