Compile CSS and JS files in using Vite Laravel

By Hadayat Niazi

If you are looking to compile your CSS and JS files in a more efficient and faster way, then using Vite in Laravel is a great option. Vite is a build tool for modern web development that is designed to be fast and easy to use.

To get started with using Vite in Laravel, you first need to install the Vite package using npm. You can do this by running the following command in your terminal:


npm install vite


Once you have installed Vite, you can create a vite.config.js file in the root of your Laravel project. This file will contain the configuration for Vite and will define how your CSS and JS files should be compiled.

Here is an example of a vite.config.js file:


export default {
build: {
cssCodeSplit: false,
assetsPublicPath: "/",
rollupOptions: {
input: "resources/js/app.js",
},
},
};


After creating the Vite configuration file, you can run the Vite build command to compile your CSS and JS files. You can do this by running the following command in your terminal:


vite build


Once the build process is complete, you will have your CSS and JS files compiled and ready to use in your Laravel project.

Using Vite in Laravel is a great way to compile your CSS and JS files quickly and efficiently. By following the steps outlined above, you can easily integrate Vite into your Laravel project and start using it to compile your files.