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,
Related
**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 want to implement a date picker in one of my text input page. I have a page call panel.blade.php and app.blade.php which is the layout page. Since Laravel comes with bootstrap and jquery installed, I did the usual import to include the necessary files to make it work.Below is the code.
app.blade.php:
<head>
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
.
.
.
.
.
.
<script>
$('.date').datepicker({
format: 'mm-dd-yyyy'
});
</script>
panel.blade.php:
<tr>
<td>454542</td>
<td><input class="date form-control" type="text"></td>
<td>Chair</td>
<td>Received</td>
<td>xxxx</td>
</tr>
The problem is when I click on the textbox, it's supposed to pop out the date picker UI but nothing came out. I spent some time trying to figure out what went wrong but to no avail. Anyone can point out what went wrong?
Appreciate it.
The problem is that you are assuming that Laravel includes Bootstrap and jquery, but I don't see it in a fresh install. (Are you using a template maybe?)
Put this lines in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
And it should works perfectly ;)
EDIT:
Try putting the jquery import before the bootstrap datepicker import:
app.blade.php
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
EDIT2:
To change the format you can also try to add a property to the input field:
<input class="date form-control" data-date-format="mm/dd/yyyy">
Hope it works flawlessly!
I lose my bootstrap styles when passing variable (get) to route->Controller->View in Laravel 5.4.
here is my code-
header.blade.php->
<a href="{{URL::to( '/news/'.$v_all_published_category->id )}}">
web.php->
Route::get('/news/{id}', 'NewsController#view_news');
NewsController.php->
public function view_news($id) {
$category_info = Category::where('publication_status', 1)->get();
$category_product = Product::where('id', $id)->get();
$data = array();
$data['header_content'] = view('Front_End.includes.header', ['all_published_category' => $category_info]);
$data['home_slider']= view('Front_End.slider.home_slider');
$data['main_content'] = view('Front_End.category.category_content', ['category_product' => $category_product]);
$data['footer_content']= view('Front_End.includes.footer');
return view('Front_End.master')->with($data);
}
#EdwardPalen
<!DOCTYPE html>
<html>
<head>
<title>NewsFeed</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/animate.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/font.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/li-scroller.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/slick.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/jquery.fancybox.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/theme.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/style.css')}}">
</head>
<body>
<a class="scrollToTop" href="#"><i class="fa fa-angle-up"></i></a>
<div class="container">
#yield('header_content')
#yield('slider')
#yield('main_content')
#yield('footer_content')
</div>
{{ Html::script('page_assets/assets/js/jquery.min.js') }}
{{ Html::script('page_assets/assets/js/wow.min.js') }}
{{ Html::script('page_assets/assets/js/bootstrap.min.js') }}
{{ Html::script('page_assets/assets/js/bootstrap.min.jss') }}
{{ Html::script('page_assets/assets/js/jquery.li-scroller.1.0.js') }}
{{ Html::script('page_assets/assets/js/jquery.newsTicker.min.js') }}
{{ Html::script('page_assets/assets/js/jquery.fancybox.pack.js') }}
{{ Html::script('page_asset`enter code here`s/assets/js/custom.js') }}
</body>
</html>
Have you tried using the blade helper tags?
When the directory level in the URL changes the styles don't get found. You should use the helpers Laravel provides to generate a full URL.
Try to integrate it like this in the app.blade.php file:
There's assets()
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
Or even a helper to create the full link tag for including:
{{ HTML::style('assets/css/bootstrap.min.css') }}
(And there's one for javascript files too)
{{ HTML::script('assets/js/script.js') }}
You can take as reference of this issue in this link:
I lose my bootstrap styles when passing variable (get) to route->Controller->View in Laravel 4
A solution and method that I use frequently.
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
You can include CSS and JS files, and you can put them directly in the public / css or public / js folder and then link them from the layout with the asset () function:
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">
Wondering how can I link with blade syntax to my jquery/javascript files?
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/bootstrap.js"></script>
This didn't work:
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/jquery.min.js') }}">
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/bootstrap.js') }}">
URL::to($param) directs to your root folder (/public) and adds the string folders. URL::to('js/bootstrap.js') directs to /public/js/bootstrap.js. this looks correct to me.
although you used a css linking tag for javascript. try using:
<script src="{{ URL::to('js/jquery.min.js') }}"></script>
<script src="{{ URL::to('js/bootstrap.js') }}"></script>
You should use the following:
<script src="{{ URL::asset('/js/jquery.min.js') }}"><script/>
<script src="{{ URL::asset('/js/bootstrap.js') }}"><script/>
This will always work. If you are creating a package in workbench this is also the way to go.
And if you want to publish your assets to public you will do:
php artisan asset:publish --bench="vendor/package"