Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: christoph-rumpel.com
Auto-Refresh Livewire Components While Keeping States With Vite
Vite is the new front-end tooling for Laravel. https://vitejs.dev/ is the Next Generation Frontend Tooling, which is Laravel's default from now on.
When working with Laravel Livewire, our components often have different states, depending on the current data.
import {defineConfig} from 'vite'; import laravel from 'laravel-vite-plugin'; import livewire from '@defstudio/vite-livewire-plugin'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), livewire({ refresh: ['resources/css/app.css'], }), ], }); And last, add the reload manager to your main JavaScript file. import { livewire_hot_reload } from 'virtual:livewire-hot-reload' livewire_hot_reload(); No we can start Vite through npm run dev, and you should see a console message that the Vite Livewire plugin is successfully enabled.
When working with Laravel Livewire, our components often have different states, depending on the current data.
import {defineConfig} from 'vite'; import laravel from 'laravel-vite-plugin'; import livewire from '@defstudio/vite-livewire-plugin'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), livewire({ refresh: ['resources/css/app.css'], }), ], }); And last, add the reload manager to your main JavaScript file. import { livewire_hot_reload } from 'virtual:livewire-hot-reload' livewire_hot_reload(); No we can start Vite through npm run dev, and you should see a console message that the Vite Livewire plugin is successfully enabled.
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers