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?
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:
public/cms/assets/css/ => resources/css/metronic/
public/cms/assets/js/ => resources/js/metronic/
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,
}),
],
});
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';
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" />
Hope this helps! Let me know if you have any questions. Thanks!