Hot Module Replacement Development Tutorials, Guides & Insights

This simple React component will serve as your starting point.

To use the React component in your Laravel views, you need to create a Blade template. For example, create a new Blade template at resources/views/welcome.blade.php:

Then, add it to your vite.config.js:

   import vue from '@vitejs/plugin-vue';

   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
           vue(),
       ],
   });

   import { defineConfig } from 'vite';

   export default defineConfig({
     server: {
       port: 3000, // Change the development server port
     },
     build: {
       outDir: 'dist', // Customize the output directory
     },
     resolve: {
       alias: {
         '@': '/src', // Example of setting an alias
       },
     },
   });

Vite allows you to use environment variables by creating .env files. For example, create a .env file: