Get Started Free

How to Use Vite for Asset Bundling in Laravel 10

Home
Blog
How to Use Vite for Asset Bundling in Laravel 10

Views: 2.1K
Category: Laravel

Published at: 05 Oct, 2023
Updated at: 06 Oct, 2023

How to Use Vite for Asset Bundling in Laravel 10

In the fast-paced world of web development, efficiency and speed are the linchpins of an effective web application. Laravel, being a renowned PHP framework, is always in pursuit of these ideals. Laravel 10, the latest installment, opens the door to a multitude of tools and libraries designed to make web development a breeze. One such tool that has caught the eye is Vite, a front-end tool that promises to make asset bundling and handling more efficient and faster.

Introducing Vite in Laravel 10
Vite is a next-generation front-end tool that significantly improves the development experience. It was developed by Evan You, the creator of Vue.js. Unlike Laravel Mix, which bundles assets during development, Vite improves the frontend development experience by providing features like hot module replacement and faster development server start.

Why Vite Over Laravel Mix?
Vite employs native ES modules that transform your code at unbelievable speeds, making the development process faster and more efficient. In contrast, Laravel Mix, though powerful, can be a bit sluggish, as it rebuilds the entire bundle during the development stage whenever changes are made. Vite's ability to instantly update the changes during development is a feature that sets it apart.

Integrating Vite with Laravel 10
Now, let’s delve into integrating Vite with Laravel 10 using an example. Here we will walk you through each step, ensuring an easy-to-follow guide.

Method 1: Using Route

Route::get('/', function () {
    return view('welcomevite');
});

In the above snippet, we define a route that returns a view named 'welcomevite'. This is a straightforward way to display a view when the user visits the home page of the application.

Method 2: Using a Controller
If you prefer using a controller, below is an example of how it can be done.

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class About extends Controller
{
    public function index(){
        return view('welcomevite');
    }
}

In this method, we create an About controller with an index method that returns the 'welcomevite' view. This provides a more organized way of handling views and their associated logic.

The View
The view is where the magic happens. Here’s a basic example of how it can be set up with Vite.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    @vite('resources/css/app.css')
</head>
<body>
    <img src="{{Vite::asset('resources/theme/images/img.png')}}" class="">
    <h1>welcome to vite</h1>
    <h2>weclome in h2</h2>
    @vite('resources/js/app.js')
</body>
</html>

In this snippet, we import CSS and JS assets using the @vite directive. The Vite::asset directive is used for referencing the image path, ensuring the assets are loaded efficiently.

The CSS and JS Files

/* app.css */
@import url('../theme/css/style.css');
@import url('../theme/css/style2.css');

// app.js
import '../theme/js/script.js';
import '../theme/js/script2.js';

We import styles and scripts into the app.css and app.js files respectively. Vite will then handle these assets, ensuring they’re bundled and loaded efficiently.

Handling Static Assets
With Vite, handling static assets like images and fonts is a cakewalk.

import.meta.glob([
    '../theme/images/**',
]);

Vite provides the import.meta.glob to efficiently import and handle static assets.

Vite Configuration
Lastly, configuring Vite is straightforward and involves creating a vite.config.js file with the necessary settings.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

This configuration file integrates Vite into the Laravel project and specifies the entry files for CSS and JS.

Conclusion
Embracing Vite in Laravel 10 development offers an exceptional development experience, with faster build times and efficient asset handling. The steps outlined above should set you on a swift journey of exploring the wonders that await with the combination of Vite and Laravel 10. Happy coding!

Shehzad Ahmed Arain

Shehzad Ahmed is a highly qualified expert with a Master of Philosophy in Computer Science and a decade of extensive industry experience. With his impressive track record in web development and computer science, he has not only left an indelible mark on the industry but also made substantial contributions to education. Since , he has created more than eighty exhaustive courses, paving the way for innumerable individuals interested in learning and development. His unparalleled knowledge and innate ability to elucidate complex ideas make him a highly sought-after educator and consultant. Choose Shehzad and take advantage of his exceptional balance of technical expertise and teaching prowess to propel your learning journey or project to new heights.

0 Comment(s)