**I installed livewire ,laravel mix and jetstream on laravel 8. But the Jetsream's css and js is not working and shows a message in header that '#vite(['resources/css/app.css', 'resources/js/app.js'])' **
App.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
#livewireStyles
<!-- Scripts -->
#vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
go to (app.blade.php, guest.blade.php) and remove #vite like this
#vite(['resources/css/app.css', 'resources/js/app.js']) => Remove this and add following
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
Replace the Welcome.blade.php and guest.blade.php and test.blade.php with this code, It's work for me
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#livewireStyles
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
#livewireScripts
</body>
</html>
just paste two line inside ( app.blade.php, guest.blade.php ) instead of #vite like this :
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
{{-- #vite(['resources/css/app.css', 'resources/js/app.js']) --}}
and paste this code inside this folder public/mix-manifest.json
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
I ran into the same issue, I solved it by switching to PHP 8. You have to delete your project and re-create it after switching.
It's probably a caching problem fo:
Run the command:
sail restart
Laravel 8 does not support vite. So this is why you see your directive as a string.
Besides, for me, I have to force the assets to load via HTTPS schema. In AppServiceProvider.php boot() according to this https://stackoverflow.com/a/51819095/8369356.
Removing #vite(['resources/css/app.css', 'resources/js/app.js']) and replacing it with
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
worked for me
if you update your project from laravel-mix to Vite.
Just use
"npm run dev"
after that
run: "npm run build"
it works fine
I had this issue and discovered the reason was because I didn't name the file correctly, I used app.php instead of app.blade.php. Fixing that fixed the issue.
VITE build configurations comes with only Laravel 9 & above, if we pull breeze or Jetstream to lower version [Below Laravel 9], it will cause this issue, because lower version got the configuration of Laravel mix. Breeze & Jetstream by default with VITE configuration despite the version of laravel.
You have to update your laravel version above 9, for that you have to update your local PHP version above 8
Just go to config/app.php and:
'url' => env('APP_URL', 'http://localhost'),
// 'asset_url' => env('ASSET_URL', '/'),
'asset_url' => env('APP_URL', '/'),
.env file may do not content ASSET_URL parameter. Just set ASSET_URL same to APP_URL
All 404 NOT FOUND errors can be tracked to an URL misconfiguration
I have a project with laravel and I have configured the following file for webpack, but then in my template I use a file "head.blade.php" where I load all the vendors, I use jquery, boostrap, moment ... etc
When I upload this and pass a performance test on google page speed or other services it tells me that I have more than 20 JS that compress them, and I don't know how to do it.
File webpack.mix.js
const mix = require('laravel-mix');
mix.scripts([
'resources/js/app.js',
'resources/js/bootstrap.js'
], 'public/js/app.js').extract([
], 'public/js/vendors.js').version();
mix.scripts([
'resources/js/cars.js',
], 'public/js/cars.js').extract([
], 'public/js/vendors.js').version();
mix.scripts([
'resources/js/customers.js',
], 'public/js/customers.js').extract([
], 'public/js/vendors.js').version();
mix.js('resources/js/bootstrap-table-es-ES.js', 'public/js');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Head.blade.php
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Vendor CSS Files -->
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/icofont/icofont.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/venobox/venobox.css') }}" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
{{--JQUERY--}}
<script src="{{ asset('assets/vendor/jquery/jquery-3.5.1.min.js') }}"></script>
{{--BOOTSTRAP-TABLES--}}
<link rel="stylesheet" href="{{ asset('assets/vendor/boostrap-tables/bootstrap-table.min.css') }}">
<script src="{{ asset('assets/vendor/boostrap-tables/bootstrap-table.min.js') }}"></script>
<script src="{{ asset('assets/vendor/boostrap-tables/bootstrap-table-es-ES.min.js') }}"></script>
<script src="{{ asset('assets/vendor/popper/popper.min.js') }}"></script>
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ mix('/js/bootstrap-table-es-ES.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ asset('assets/vendor/moment/moment.min.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>
Thanxs,
Here is my code for Layout Blade
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/aos.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.min.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
#yield('content')
</main>
<div class="col-sm-3">
<div class="partners">
<img src="imgs/logo_footer.png" alt="" class="img-responsive">
<img src="imgs/logo_footer2.png" alt="" class="img-responsive" style="max-height:35px;">
<img src="imgs/logo_footer3.png" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
And it works fine.
With result "imgs/logo_footer.png"
But in the content, using the same way, the result is "http://127.0.0.1:8000/imgs/beatriz02062020.png"
I tryed with asset().
I think you'll need to dd(asset($pathToYourImage)); somewhere in the view to be sure of the path. Than comment below to show me the result
You can use the following line for displaying image:
<img src="{{URL::to('/').'/imgs/logo_footer.png'}}" alt="" class="img-responsive">
for regular images in public folder like public/assets/images/img.png you can try
<img src="{{url('assets/images/img.png')}}">
or
<img src="{{assets('assets/images/img.png')}}">
also if you online you should consider change APP_URL in your .env file
as url() or assets() get the APP_URL value and use it in url
do not forget to run
php artisan config:clear
after any change in online version of .env file
if your image is uploaded image form a form read the these down.
the point is that the upload path is relevant to storage folder in your laravel project. so if you do every thing by the book, you should try the following,
first thing check files in storage/app/public folder , you should found your files there
also check your settings in config/filesystem.php in your project.
if you found the files in storage/app/public/{any-folder-name}
and the project configuration in config/filesystem.php is public
do the following
run command
php artisan storage:link
this will make a symlink (a shortcut)
then use this piece of code to get your images
Storage::url($image_path)
I have a .blade.php view that is nice and well designed with css, but when I put a variable like {{$data}} or even inside a for each loop {{$d->col1}} the css design get away.
What is the reason to be
#foreach($data as $d )
{{$d->price}}
#endforeach
I corrected myself
I changed
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
to
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
And the problem solved.
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">