Question Details

No question body available.

Tags

php laravel vite laravel-12

Answers (1)

Accepted Answer Available
Accepted Answer
November 29, 2025 Score: 2 Rep: 19,197 Quality: High Completeness: 80%

You can specify any number of sources for the laravel-vite-plugin:

vite.config.js

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/welcome.css',
            'resources/js/welcome.js',
            'resources/css/app.css',
            'resources/js/app.js',
            'resources/css/admin.css',
            'resources/js/admin.js',
        ]),
    ],
});

Finally, you use in each view only the ones you actually need.

resources/views/welcome.blade.php

{{-- ... --}}

@vite(['resources/css/welcome.css', 'resources/js/welcome.js'])

resources/views/app.blade.php

{{-- ... --}}

@vite(['resources/css/app.css', 'resources/js/app.js'])

resources/views/admin.blade.php

{{-- ... --}}

@vite(['resources/css/admin.css', 'resources/js/admin.js'])

As you mentioned in the question, it's possible that you already have a separate . In this case, most modern browsers will handle a secondary correctly, but you can pass variables from outside to layout.blade.php and then use them in @vite. (Reference: How to pass variable to @extends blade and Can HTML contain two HEAD tags)

resources/views/layout.blade.php

{{ $title ?? config('app.name') }}

@if(isset($sources)) @vite($sources) @else @vite(['resources/js/app.css', 'resources/js/app.js']) @endif

resources/views/admin.blade.php

@extends('layout', ['sources' => ['resources/js/admin.css', 'resources/css/admin.js']])

@section('content')

Hello World

@endsection

Of course, you can also assemble the array passed to the plugin automatically. If your structure is known, you can read the file system accordingly and automatically collect the file paths.

For example, if you assume that every file in the js and css folders should be a separate source, but I ignore the subfolders, I would do something like this (when building the source, for instance, files used from the js/utils subfolder are bundled into the source by Vite, so you don't need to worry about that):

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'fs';
import path from 'path';

function getFilesFromDir(dir) { return fs.readdirSync(dir) .filter(file => { const ext = path.extname(file); return (!ignoreFiles.includes(file) && (exts.length === 0 || exts.includes(ext))); }) .map(file => path.join(dir, file).replace(/\\/g, '/')); }

const cssFiles = getFilesFromDir('resources/css', ['.css']); const jsFiles = getFilesFromDir('resources/js', ['.js']);

export default defineConfig({ plugins: [ laravel([ ...cssFiles, ...jsFiles, ]), ], });

Note: It's just a quick illustrative example; there might be a better alternative.