Module Description
Vite integration for Drupal asset libraries.
How to use
* Install the module.
* Configure Vite to:
* generate manifest.json https://vitejs.dev/config/build-options.html#build-manifest
* use right assets base path for production https://vitejs.dev/config/shared-options.html#base, usually it will be something like /themes/custom/my_theme/dist/ or /modules/custom/my_module/dist/
* depending on your setup, you may also need to configure dev server host and/or port https://vitejs.dev/config/server-options.html#server-options
import { defineConfig } from "vite" export default defineConfig({ + base: "/themes/custom/my_theme/dist/", build: { + manifest: true, rollupOptions: { input: [ [...] ], }, }, [...] })
* In the <theme|module>.libraries.yml, for the library you would like to use assets build by vite, add property vite: true and when defining assets provide their paths to entry points used in vite instead of paths to build assets.For example:
global-styling: + vite: true js: - dist/script.js: {} + src/script.ts: {} css: component: - dist/style.css: {} + src/scss/style.scss: {} dependencies: - core/drupalSettings
* The module will dynamically rewrite assets paths to dist and include their dependencies defined in manifest.json.
* To use hot module reload during development, just start vite dev server. If the server is accessible on the localhost under default port (5173) the module will automatically start using it instead of dist assets from manifest.json as soon as you clear the cache (library definitions are cached by default).
Configuration Described in the README.md.
How to use
* Install the module.
* Configure Vite to:
* generate manifest.json https://vitejs.dev/config/build-options.html#build-manifest
* use right assets base path for production https://vitejs.dev/config/shared-options.html#base, usually it will be something like /themes/custom/my_theme/dist/ or /modules/custom/my_module/dist/
* depending on your setup, you may also need to configure dev server host and/or port https://vitejs.dev/config/server-options.html#server-options
import { defineConfig } from "vite" export default defineConfig({ + base: "/themes/custom/my_theme/dist/", build: { + manifest: true, rollupOptions: { input: [ [...] ], }, }, [...] })
* In the <theme|module>.libraries.yml, for the library you would like to use assets build by vite, add property vite: true and when defining assets provide their paths to entry points used in vite instead of paths to build assets.For example:
global-styling: + vite: true js: - dist/script.js: {} + src/script.ts: {} css: component: - dist/style.css: {} + src/scss/style.scss: {} dependencies: - core/drupalSettings
* The module will dynamically rewrite assets paths to dist and include their dependencies defined in manifest.json.
* To use hot module reload during development, just start vite dev server. If the server is accessible on the localhost under default port (5173) the module will automatically start using it instead of dist assets from manifest.json as soon as you clear the cache (library definitions are cached by default).
Configuration Described in the README.md.
Module Link
Project Usage
97
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the integration of Vite for Drupal asset libraries by providing instructions on installation and configuration to generate manifest.json, use the right assets base path for production, and configure the dev server host and/or port.
Data Name
vite