Using Vite with Laravel

Using Vite with JavaScript Heavy Laravel project
Remove Laravel Mix dependencies
Install Vite
Add Vite config

Transcript

2. What is Vite • A build tool for faster and better development experience for web apps • Serves native ES modules transpired with ESBuild • For production builds it uses Rollup to bundle assets • Some features of Vite • Instant Server Start • Fast HMR • Support for TypeScript, JSX etc. • Optimized build with Rollup • Fully typed APIs
3. What are the problems with existing tools? • Slow start of dev server • Slow file updates • Slow HMR • Long build time
4. Features of Vite • Dependency resolving and prebuilding • HMR • Typescript support • Support from Vue • Support for JSX • Dealing with CSS • Static assets • Glob Import • Build Optimizations
5. Vite Configurations • Create Vite config file • Conditional config • Async Config
6. Vite APIs • Plugin API • HMR API • JavaScript API
7. Demo Time
8. Using Vite with Laravel • Using Vite with JavaScript Heavy Laravel project • Remove Laravel Mix dependencies • Install Vite • Add Vite config
9. Using Laravel Vite • https://laravel-vite.innocenzi.dev/ • Using the preset npx apply laravel:vite
10. Demo Time
11. Any Questions?