userfrosting / vite-php-twig
Vite function for Twig templates
Installs: 2 628
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Requires
- php: ^8.1
- twig/twig: ^3.3
Requires (Dev)
- friendsofphp/php-cs-fixer: ^3.0
- mockery/mockery: ^1.2
- phpstan/phpstan: ^1.1
- phpstan/phpstan-deprecation-rules: ^1.0
- phpstan/phpstan-mockery: ^1.0
- phpstan/phpstan-phpunit: ^1.0
- phpstan/phpstan-strict-rules: ^1.0
- phpunit/phpunit: ^10.5
- slam/phpstan-extensions: ^6.0
README
Vite Manifest function for PHP & Twig Templates. Allows Vite manifest integration in PHP & Twig Templates without Symfony. Optimized for PHP-DI style containers.
Inspired by kellerkinderDE/vite-encore-bundle & PHP-Vite.
Installation
composer require userfrosting/vite-php-twig
Documentation & Usage
Using standalone
$manifest = new ViteManifest('.vite/manifest.json'); // Get files for `views/foo.js` entry $manifest->getScripts('views/foo.js'); // Scripts $manifest->getStyles('views/foo.js'); // Style $manifest->getImports('views/foo.js'); // Preload // Render HTML tags for `views/foo.js` entry $manifest->renderScripts('views/foo.js'); // Scripts $manifest->renderStyles('views/foo.js'); // Style $manifest->renderPreloads('views/foo.js'); // Preload // If you have multiple entry point scripts on the same page, you should pass them in a single call to avoid duplicates - for example: $manifest->getScripts('views/foo.js', 'views/bar.js');
ViteManifest
implements\UserFrosting\ViteTwig\ViteManifestInterface
if you prefer to type-hint against interfaces, for use with dependency injection.
Using with Twig
Requires Twig 3 or newer
Vite writes an manifest.json
file that contains all of the files needed for each "entry". To reference entries in Twig, you need to add the ViteTwigExtension
extension to the Twig Environment. This accept a ViteManifest
, which itself accept the path to the manifest.json
,
use UserFrosting\ViteTwig\ViteManifest; use Twig\Environment; use Twig\Loader\FilesystemLoader; $manifest = new ViteManifest('.vite/manifest.json'); $extension = new ViteTwigExtension($manifest); // Create Twig Environment and add extension $loader = new FilesystemLoader('./path/to/templates'); $twig = new Environment($loader); $twig->addExtension($extension);
Now, to render all of the script
and link
tags for a specific "entry" (e.g. entry1
), you can:
{{ vite_js('views/foo.js') }} {{ vite_css('views/foo.js') }} {{ vite_preload('views/foo.js') }}
If you have multiple entry point scripts on the same page, you should pass them in a single call to avoid duplicates - for example:
{{ vite_js('views/foo.js', 'views/bar.js') }}
Vite default port
By default, vite will use port 5173
. However, if the port is already being used, Vite will automatically try the next available port so this may not be the actual port the server ends up listening on. Since a PHP application doesn't know which port is being used by vite, the port can be forced in the vite.config.js
file inside your project's root directory using server.strictPort
and server.port
:
server: { strictPort: true, port: 3000, },
For more information on how to configure Vite, see the official documentation.
ViteManifest Options
$manifest = new ViteManifest( manifestPath: '.vite/manifest.json', basePath: 'dist/', serverUrl: 'http://[::1]:5173/', devEnabled: true, )
manifestPath
- string
Points to the Vite manifest.json
file created for the production build.. Optional if you're using the dev server
basePath
- string
Public base path from which Vite's published assets are served. The assets paths will be relative to the outDir
in your vite configuration. It could also point to a CDN or other asset server, if you are serving assets from a different domain.
serverUrl
- string
The vite server url, including port. Can be used to specify a non-default port if used.
devEnabled
- bool
Indicates whether the application is running in development mode (i.e. using vite server). Defaults to false.