Hot Module Replacement
Instant component updates during development without losing state.
How It Works
When you save a Blade template or PHP component file, LiVue automatically:
- Detects the file change via Vite plugin
- Saves the current state of all components
- Reloads components from the server with new templates
- Restores the saved state
No page refresh needed. Your form inputs, scroll position, and component state are preserved.
Visual Indicator
A small toast appears during updates:
"Updating..." - Update in progress
"Updated" - Success
"Update failed" - Error (check terminal)
JavaScript API
// Check if HMR is available
if (LiVue.hmr.isAvailable()) {
console.log('HMR ready');
}
// Enable/disable
LiVue.hmr.disable();
LiVue.hmr.enable();
// Configure
LiVue.hmr.configure({
indicator: true, // Show visual toast
preserveState: true, // Keep state during reload
});
// Hook into updates
const unsubscribe = LiVue.hmr.onUpdate((data) => {
console.log('File changed:', data.fileName);
});
// Manual trigger (for testing)
LiVue.hmr.trigger();Configuration
vite.config.js
import livueHmr from './packages/livue/vite-plugin-livue-hmr.js';
export default {
plugins: [
livueHmr({
watchPaths: [
'resources/views/livue',
'app/LiVue',
],
verbose: true,
}),
],
};
config/livue.php
'hmr' => [
'enabled' => env('LIVUE_HMR', true),
'indicator' => true,
'preserve_state' => true,
],What's Preserved
Preserved
- Public properties ($count, $name, etc.)
- Dirty state (unsaved changes)
- Form input values
Not Preserved
- Functions and callbacks
- DOM element references
- Vue internal state (computed cache)
Notes
- HMR only works with Vite dev server (
npm run dev) - Automatically disabled in production
- New PHP properties will have their default values
- Removed properties are silently ignored