javascript laravel laravel-blade vite metronic

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:

Move Assets to resources/

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

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,
        }),
    ],
});

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';

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.