I had a laravel 7 setup with php 7.2 and mssql. had some issues, posted here also but in the end, client followed my proposal to ues latest version ( they had numerious applications running on old php that is why they wanted this one on php 7.2 also).
So after basic setup I realized laravel now don't use Mix, it uses Vite instead. But I was not able to find reference where it shows the alternative for
mix.copyDirectory('/resoureces/images')
Is this normal in Vite? I have to create a folder in public directory and then place assets there??
Does this help you ?
export default defineConfig({
plugins: [
laravel([
'resources/sass/app.scss',
'resources/js/app.js',
]),
});
Then in blade.
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@vincent15000 this is for css and js files, I got that. but I was not able to understand how to use it for static/ image files.
Is this normal in Vite? I have to create a folder in public directory and then place assets there??
YES ( https://vitejs.dev/guide/assets.html#the-public-directory )
@Niush NO, I didn't do this and it works. You can place your assets where you want.
Never referenced in source code (e.g. robots.txt)
Must retain the exact same file name (without hashing)
...or you simply don't want to have to import an asset first just to get its URL
So it depends on what you need.
@Niush it looks a little bit odd to copy files in a public folder directly, but I think we used to do this in code igniter as well . so its okay.
@eaglehdr According to this: https://laravel-vite.dev/guide/essentials/working-with-assets.html , you can let Vite handle the static assets (images) by referencing them in basically any folder (you can even set the "root folder" aliases like "@": https://laravel.com/docs/9.x/vite#aliases) or you can use absolute urls and Vite will ignore the assets...the decision mostly depends on whether or not you need versioning for cache-busting for any particular asset(s).
On laravel-mix, i am doing this:
.copyDirectory('node_modules/bootstrap', 'public/my_custom_folder/bootstrap')
how to achieve this on vite?
@kapitan If you really need, you can use plugin like this: https://github.com/sapphi-red/vite-plugin-static-copy
There will be downside to it and can make Vite slower. The best solution at the end is to include these bootstrap assets directly in public directory, or use import declaration to pull css, js, modules wherever needed.
app.js
import.meta.glob([ '../img/**', ]);
in blade
<img src="{{Vite::asset('resources/img/crocodile.png')}}" alt="crocodile" class="h-10 w-10">
So that crocodile image will be coped in public file after you run build, also it works while run dev
Please or to participate in this conversation.