Front-end with Vite — Laravel 10 Discovery Training

We will now make a small aside to detail the use of front-end assets (JavaScript / CSS) within the framework of Laravel. When you start working on JavaScript you very quickly need tools like bundlers to work efficiently. Unfortunately these tools are often designed for static websites and integration with a backend application is not necessarily easy.

When installing Laravel already has a configuration to use the Vite bundler with a file package.json pre-filled.

npm install

Then you can start the development server quickly using the command.

npm run dev

However, you will need to modify your base blade template to include the paths to the assets distributed by view.

<!doctype html>
<head>
    {{-- ... --}}

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

When putting the site online you can “build” the assets using the command npm run build and the directive @vite will automatically display the path to the compiled files.

You can also modify the configuration file vite.config.js at the root of your Laravel project to modify the bundle to suit your needs. The documentation details some specific use cases such as front-end framework support (react, vue, inertia…).

RELATED ARTICLESMORE FROM AUTHOR