How to Use Vite with Laravel 10

Vite is a fast build tool for modern web development. In this article, we will discuss how to integrate Vite with Laravel 10 for asset bundling and improving the development experience.

Integration Vite with Laravel 10

First, make sure you have Laravel 10 installed in your local environment. If not, you can install it using the following command:

  
    composer create-project --prefer-dist laravel/laravel:^10.0 my-project
  

Once your Laravel project is set up, you can start integrating Vite by following these steps:

1. Install Vite using npm or yarn:

  
    npm install --save-dev @vitejs/plugin-vue @vitejs/plugin-vue-tsx @vitejs/plugin-vue-jsx vite
  

2. Create a vite.config.js file in the root of your Laravel project:

  
    const { defineConfig } = require('vite')

    module.exports = defineConfig({
      build: {
        outDir: 'public/build',
        emptyOutDir: true,
      },
    })
  

3. Update your Laravel mix configuration to use Vite for asset bundling. In your webpack.mix.js file, you can use the following code:

  
    const mix = require('laravel-mix')

    mix.js('resources/js/app.js', 'public/build')
      .vuetify()
      .version()
  

By following these steps, you can integrate Vite with Laravel 10 and use it for asset bundling in your projects.

Asset Bundling with Laravel 10

Asset bundling is an important aspect of modern web development, as it allows you to optimize and bundle your assets for better performance. With Vite, you can benefit from faster build times and improved development experience when working with Laravel 10.

Once you have Vite integrated with your Laravel project, you can start using it to bundle your assets by running the following command:

  
    npm run dev
  

This will trigger the Vite build process and bundle your assets for development. You can also use the npm run build command to bundle your assets for production.

Overall, integrating Vite with Laravel 10 for asset bundling can greatly improve your development workflow and enhance the performance of your web applications.