Asset Bundling with Vite

Relevant source files

The following files were used as context for generating this wiki page:

• vite.config.js
• resources/js/app.js
• resources/css/app.css
• package.json
• composer.json
• resources/views/welcome.blade.php

Asset bundling in this project is managed by Vite, a modern frontend build tool that provides a fast development environment and optimized production builds. Vite replaces older bundling systems to handle JavaScript modules and CSS preprocessing, specifically integrating with the Laravel ecosystem through a dedicated plugin.

The system is configured to process primary entry points located in the resources directory, transforming them into versioned assets ready for browser consumption. This process includes Tailwind CSS integration and hot module replacement (HMR) during development to enhance the developer experience.

Configuration and Environment

The core of the asset bundling system is defined in vite.config.js, which utilizes the laravel-vite-plugin and @tailwindcss/vite plugin. The configuration specifies the entry points for the application's assets and defines server-side behavior for development.

Key Configuration Elements

Option	Value / Description	Source
Input Entry Points	resources/css/app.css, resources/js/app.js	vite.config.js:8
Refresh	Enabled (true) for hot reloading	vite.config.js:9
Ignored Paths	**/storage/framework/views/**	vite.config.js:14
Type	module	package.json:4

The project uses a standard Node.js environment to manage these dependencies, as defined in package.json.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

Sources: vite.config.js:1-18

Build Pipeline and Scripts

The asset lifecycle is managed through NPM scripts that trigger Vite commands. These scripts are essential for both local development and production deployment.

Development Flow

During development, the npm run dev command starts the Vite development server. This allows for real-time asset serving and hot module replacement.

Production Flow

For production, the npm run build command executes vite build, which compiles, minifies, and versions the assets, generating a manifest.json file used by the backend to locate the compiled files.

The following diagram illustrates the asset processing flow:

Asset Integration in Views

Assets are injected into the HTML via Blade templates using the @vite directive. The system dynamically decides whether to serve assets from the Vite development server or from the compiled production build based on the presence of a hot file or a manifest.json file.

In resources/views/welcome.blade.php, the template checks for these files to determine the loading strategy:

@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
    @vite(['resources/css/app.css', 'resources/js/app.js'])
@else
    <style>
        /* Inline fallback styles */
    </style>
@endif

Sources: resources/views/welcome.blade.php:16-18

Sequence of Asset Loading

CSS and Tailwind Integration

The project uses Tailwind CSS v4.0, which is integrated directly into the Vite pipeline via the @tailwindcss/vite plugin. The primary CSS entry point is resources/css/app.css.

CSS Directives and Sources

The CSS configuration uses @source directives to tell the compiler which files to scan for utility classes:

• ../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php
• ../../storage/framework/views/*.php
• ../**/*.blade.php
• ../**/*.js

Sources: resources/css/app.css:3-6, package.json:11-16

Summary of Dependencies

The bundling system relies on several key development dependencies managed via package.json.

Dependency	Version	Purpose
vite	^7.0.7	Build tool and dev server
laravel-vite-plugin	^2.0.0	Bridge between Laravel and Vite
@tailwindcss/vite	^4.0.0	Tailwind CSS integration for Vite
tailwindcss	^4.0.0	CSS Framework
axios	^1.11.0	HTTP client for JavaScript

Sources: package.json:11-17

Asset bundling with Vite provides this project with a streamlined, high-performance workflow for managing frontend resources, ensuring fast feedback loops for developers and optimized, cache-busted assets for end users.