javascriptlaravellaravel-bladevitemetronic

How to use Vite in Laravel to compile and bundle existing CSS/JS assets located in the public folder (Metronic Admin Panel)?


I'm working on a Laravel project where I’m using the Metronic Admin Panel. All my CSS and JavaScript files are currently stored inside the public directory:

CSS: public/cms/assets/css/ --- JS: public/cms/assets/js/

In my main layout Blade file, I include these assets in the traditional way like this:

<head>
    ....
    ....
    <link href="{{ asset('cms/assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('cms/assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
    ....
    ....
</head>
<body>
    ....
    ....
    <script src="{{ asset('cms/assets/js/common/js/kh_general.js') }}"></script>
    <script src="{{ asset('cms/assets/js/axios.min.js') }}"></script>
    ....
    ....
<body>

Now I want to switch to using Vite to optimize and bundle these assets

now this is my vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

My Questions:

How do I migrate the CSS and JS files from public/cms/assets/ to resources/ so Vite can compile them?

Should I copy everything manually? What about dependencies and third-party libraries that come with Metronic?

How do I include Metronic's assets in resources/js/app.js or resources/css/app.css properly for Vite to build them?

How do I modify my Blade layout to use Vite's @vite() directive instead of the old asset() helper?

Is there a way to use @vite(['cms/assets/css/style.bundle.css']) if I keep the structure?


Solution

  • If you're migrating a Laravel project that uses the Metronic Admin Panel and currently loads CSS/JS from the public/cms/assets/ folder, here’s how to properly migrate to Vite:

    1. Move Assets to resources/

    public/cms/assets/css/ => resources/css/metronic/
    public/cms/assets/js/  => resources/js/metronic/

    1. Update Vite.config.js

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    
    export default defineConfig({
        plugins: [
            laravel({
                input: [
                    'resources/css/app.css',    // or app.scss if using Sass
                    'resources/js/app.js',
                ],
                refresh: true,
            }),
        ],
    });

    1. Import Metronic Files into Vite Entry Files.

    In resources/js/app.js:

    import '../css/metronic/style.bundle.css';
    import './metronic/kh_general.js';
    import './metronic/axios.min.js'; // or just use `import axios from 'axios'`

    In resources/css/app.css:

    @import '../css/metronic/style.bundle.css';

    1. Update your Blade Layout

    Replace your old asset() includes with the @vite directives.

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

    You asked about can i use @vite(['cms/assets/css/...']). I think you can't use it, because vite doesn't support referencing files from the public/ directory using @vite(). You must move files into resources/ for vite to process and version them.

    if you insist on keeping the old structure, you can like this.

    <link href="{{ asset('cms/assets/css/style.bundle.css') }}" rel="stylesheet" />
    But that bypass Vite's bundling, cache-busting and performance improvements.

    Hope this helps! Let me know if you have any questions. Thanks!