When creating a module, you can use the provided Vite stub to configure asset compilation. The stub uses a placeholder $LOWER_NAME$ which is replaced by the module's name in lowercase during scaffolding.
Key configuration details in the stub:
- Build Output: Assets are directed to
../../public/build-$LOWER_NAME$ to ensure module assets are isolated from the main application's public directory. - Laravel Plugin: The
laravel-vite-plugin is configured with a buildDirectory of build-$LOWER_NAME$ and a publicDirectory pointing to the application's root public folder (../../public). - Asset Inputs: Default inputs are set to
resources/assets/sass/app.scss and resources/assets/js/app.js relative to the module root. - Path Aliasing: An
@ alias is configured to point to the module's resources/js directory.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
build: {
outDir: '../../public/build-$LOWER_NAME$',
emptyOutDir: true,
manifest: true,
},
plugins: [
laravel({
publicDirectory: '../../public',
buildDirectory: 'build-$LOWER_NAME$',
input: [
__dirname + '/resources/assets/sass/app.scss',
__dirname + '/resources/assets/js/app.js'
],
refresh: true,
}),
],
resolve: {
alias: {
'@': __dirname + '/resources/js',
},
},
});