bohnmedia / contao-vite-bundle
Integrates Vite into Contao 5, based on the Symfony bundle pentatrion/vite-bundle.
Package info
github.com/bohnmedia/contao-vite-bundle
Type:contao-bundle
pkg:composer/bohnmedia/contao-vite-bundle
Requires
- php: ^8.2
- contao/core-bundle: ^5.0
- contao/manager-plugin: ^2.0
- pentatrion/vite-bundle: ^8.0
- symfony/config: ^6.4 || ^7.0
- symfony/dependency-injection: ^6.4 || ^7.0
- symfony/http-kernel: ^6.4 || ^7.0
- symfony/routing: ^6.4 || ^7.0
- symfony/yaml: ^6.4 || ^7.0
Requires (Dev)
README
A small Contao 5 wrapper around pentatrion/vite-bundle. It
registers PentatrionViteBundle in Contao Manager Edition so its Twig
functions work out of the box, and additionally exposes the most common
rendering helpers as Contao insert tags for use outside of templates.
Installation
composer require bohnmedia/contao-vite-bundle
By default the bundle expects Vite to output its build artifacts into
public/build/. Both parts of that path can be overridden through the
underlying pentatrion_vite configuration:
# config/config.yaml pentatrion_vite: public_directory: public # default: public build_directory: build # default: build
In the dev environment the Vite dev-server proxy routes and the Symfony
profiler panel are registered automatically — one proxy route per configured
build directory, so no manual routing setup is needed.
See the pentatrion/vite-bundle reference for all available configuration options.
Rendering entry tags
Render the link and script tags for a Vite entry.
Twig
{{ vite_entry_link_tags('app') }}
{{ vite_entry_script_tags('app') }}
Insert tag
{{vite_entry_link_tags::app}}
{{vite_entry_script_tags::app}}
The insert tags behave like the Twig functions they wrap: an unknown
entry resolves to an empty string by default, unless you enable
throw_on_missing_entry in the configuration.
Resolving individual asset URLs
A named asset package vite is registered automatically, so Vite-hashed
assets resolve via Symfony's asset() function or Contao's {{asset::}}
insert tag.
Twig
{{ asset('@/images/favicon.svg', 'vite') }}
Insert tag
{{asset::@/images/favicon.svg::vite}}
Multiple Vite configs
Multiple builds via the configs option of pentatrion/vite-bundle are
supported as well:
# config/config.yaml pentatrion_vite: default_config: app configs: app: build_directory: build admin: build_directory: build-admin
A dev-server proxy route is registered for each config. To render the tags
of a config other than the default one, pass its name as the second insert
tag parameter (this mirrors the configName argument of the Twig
functions):
{{vite_entry_link_tags::app::admin}}
{{vite_entry_script_tags::app::admin}}
The automatically registered vite asset package is bound to the default
config. To resolve assets from another config, register an additional
package with its own version strategy — the same approach the
pentatrion/vite-bundle documentation describes:
# config/services.yaml services: app.vite_asset_strategy.admin: class: Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy arguments: - '@pentatrion_vite.file_accessor' - 'admin' - '%pentatrion_vite.absolute_url%' - '@?request_stack' - '%pentatrion_vite.throw_on_missing_asset%'
# config/config.yaml framework: assets: packages: vite_admin: version_strategy: 'app.vite_asset_strategy.admin'
{{asset::@/images/favicon.svg::vite_admin}}
License
MIT.