Laravel Vite - Blade specific css/js

If I need to import css/js within my main layout, say app.blade.php (which is there by default when we install Laravel Breeze), I use @vite(['resources/css/app.css', 'resources/js/app.js']), and then in these files I can further import other styles or scripts. This can of course be modified in other layouts etc., but my main question is what if I have a blade, which then looks like:

<x-app-layout>

</x-app-layout>

How can I import css/js which is specific only to that blade? To further explain what I mean, to my understanding, when using Vite, everything should be stored within the resources folder, and when we run npm run build, the dist files gonna end up in public/build/assets (or whatever structure we choose). What if we also need to import some js files at the end of the app layout right before the <body> tag?

Could someone please explain some overall process how to work with this?

enadabuzaid

2 years ago

Level 31

you can use Section and Stack

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles') {{-- For page-specific styles --}}
</head>
<body>
    ...
    @stack('scripts') {{-- For page-specific scripts --}}
</body>
</html>

<x-app-layout>
    {{-- Your content goes here --}}

    @push('styles')
        <link href="{{ asset('css/specific-style.css') }}" rel="stylesheet">
    @endpush

    @push('scripts')
        <script src="{{ asset('js/specific-script.js') }}"></script>
    @endpush

</x-app-layout>

2 likes

newbie111

2 years ago

Level 1

@enadabuzaid

Thank you for your answer. Just to clarify this for me. Should some assets be within the public folder, and some within the resources folder, or it's okay to have them located in resources under css/js, and Vite will build/run with the dev them if imported as mentioned in your reply?

enadabuzaid

2 years ago

Level 31

@newbie111

During development, keep your raw, uncompiled CSS and JS files in the resources/css and resources/js directories, respectively.
Use Vite for compiling and bundling these assets. Vite will place the compiled assets in the public directory. Include these compiled assets in your Blade templates using the @vite directive.
This setup ensures that your development process is streamlined (with assets being automatically compiled and refreshed as you work) and that your application serves optimized assets to your users.

To ensure Vite places the compiled assets in your desired location, you should check and configure your vite.config.js file accordingly. Here's a very basic example of what the configuration might look like if you're customizing the output directory:

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

testing with Vite: While developing, you might use commands like npm run dev or vite to start a development server that provides features like hot module replacement (HMR). These commands are great for a development environment because they compile your assets on-the-fly and refresh your browser automatically as you make changes.

Preparing for Production: When your development and testing phases are complete, and you're ready to prepare your application for a production environment, you should use the command npm run build.

1 like

Ben Taylor

2 years ago

Level 35

If you want separate js files for different layouts or pages, you can get vite to compile into multiple js files.

I'm away from my computer and can't remember off the top of my head how to do it, sorry.

Please or to participate in this conversation.