How to Use Vite with Laravel - laravel-daily.com

If you're a Laravel developer, you've likely heard of Vite. Vite is a modern build tool that can help speed up your frontend development workflow by providing features like hot module reloading, instant server startup, and more. In this article, we'll show you how to use Vite with Laravel to improve your frontend development experience.

What is Vite?

Vite is a modern build tool that was created to help simplify the frontend development process. It was built to be fast, flexible, and modular. Vite provides features like hot module reloading, instant server startup, and more, which can help improve your frontend development workflow.

Installing Vite

To use Vite with Laravel, we'll first need to install it. We can do this using npm. Run the following command in your Laravel project directory to install Vite:

npm install vite --save-dev

Configuring Vite

Once we've installed Vite, we'll need to configure it. We'll create a new file called vite.config.js in the root of our Laravel project directory. In this file, we'll configure Vite to work with Laravel.

module.exports = {
  server: {
    proxy: {
      '/': 'http://localhost:8000'
    }
  },
  build: {
    outDir: '../public',
    assetsDir: 'assets',
    manifest: true,
    rollupOptions: {
      input: 'resources/js/app.js'
    }
  }
}

In this configuration, we're telling Vite to proxy requests to our Laravel server and to output the built files to the public/assets directory.

Updating Laravel Mix Configuration

Next, we'll need to update our Laravel Mix configuration. Laravel Mix is a build tool that is built into Laravel. We'll update our Laravel Mix configuration to use Vite instead of the default build tool.

First, we'll need to install the laravel-mix-vite package. We can do this using npm. Run the following command in your Laravel project directory to install the laravel-mix-vite package:

npm install laravel-mix-vite --save-dev

Next, we'll update our webpack.mix.js file to use Vite instead of the default build tool. Here's what our updated webpack.mix.js file will look like:

const mix = require('laravel-mix');
const vite = require('laravel-mix-vite');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.vite();

Using Vite with Laravel

Now that we've installed and configured Vite, we can start using it with Laravel. To use Vite, we'll need to update our frontend assets to use Vite.

We'll start by updating our app.blade.php file to use the Vite-built assets. Here's what our updated app.blade.php file will look like:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head>
<link rel="stylesheet" href="{{ mix('assets/css/app.css') }}"></head>
<body>
<script src="{{ mix('assets/js/app.js') }}"></script>
</body>
</html>

Conclusion

In this article, we've shown you how to use Vite with Laravel to improve your frontend development workflow. We've covered everything from