Hot Refresh for Blade templates in Modules using root vite.config.js or Module vite.config.js

[JonathanATyler]

Summary

I noticed my Module blade views weren't Hot Reloading while using npm run dev from the root project.
The default laravel paths when using refresh: true are:

const refreshPaths = [
  "app/Livewire/**",
  "app/View/Components/**",
  "lang/**",
  "resources/lang/**",
  "resources/views/**",
  "routes/**"
]

Digging around a little I have come up with...

• Import refreshPaths from laravel-vite-plugin

 import laravel, { refreshPaths } from 'laravel-vite-plugin';

• Add the Modules specific paths in the getConfig() function

refreshPaths.push(
  'Modules/**/app/Livewire/**',
  'Modules/**/app/View/Components/**',
  'Modules/**/lang/**',
  'Modules/**/resources/lang/**',
  'Modules/**/resources/views/**',
  'Modules/**/routes/**'
);

• Replace refreshPaths in laravel() refresh key, instead of true

laravel({ input: inputPaths, refresh: refreshPaths })

Solution

To help other folks who may come across this, I suggest an update to the Compiling Assets docs accordingly. And something similar for the Module specific vite.config.js stub.

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
import collectModuleAssetsPaths from './vite-module-loader.js';
 
async function getConfig() {
    const paths = [
        'resources/css/app.css',
        'resources/js/app.js',
    ];
    const inputPaths = await collectModuleAssetsPaths(paths, 'Modules');
    refreshPaths.push(
        'Modules/**/app/Livewire/**',
        'Modules/**/app/View/Components/**',
        'Modules/**/lang/**',
        'Modules/**/resources/lang/**',
        'Modules/**/resources/views/**',
        'Modules/**/routes/**'
    );
 
    return defineConfig({
        plugins: [
            laravel({
                input: inputPaths,
                refresh: refreshPaths,
            })
        ]
    });
}
 
export default getConfig();