**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 this route:
Route::get('/{language}/{housingType}/{housingUrl}', 'HousingInfoController#index');
example: http://localhost/project/public/es_ES/H/this-is-housing-url
Sometimes it can have a parameter like this one:
http://localhost/project/public/es_ES/H/this-is-housing-url?group=ESQ
then on my controller I check if this parameter exists:
$group = '';
if ($request->input('group')) {
$group = $request->input('group');
}
and send it to the view:
return view('pages.HousingInfo.index', ['group' => $group]);
on my HousingInfo view I do:
#section('group', $group)
also my HousingInfo view extends from a layout, that layout includes a head, its a file with title, description, meta tags and also the CSS's.
There I have a:
#yield('group')
so I can know which parameter was sent on the URL.
My problem is I can't use yield for IF statement to show one CSS or another based on that parameter, How can I achieve that?
This give me error:
#if(#yield('group') == 'ESQ')
<link rel="stylesheet" href="{{ asset('css/ESQ.css') }}">
#else
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#endif
Try this.
#if (!empty($group))
<link rel="stylesheet" href="{{ asset("css/$group.css") }}">
#else
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#endif
This will enable you to use multi css if your group variable is not empty, if it is then use app.css
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:
OK, it has taken me forever (since Friday) to configure everything related to Laravel, mcrypt & PHPStorm and now I am only trying to display a simple form field - it's completely blank
#section('content')
{{ Form::open() }}
{{ Form::label('username', 'Username:') }}
{{ Form::text('username') }}
{{ Form::close() }}
#stop
When I inspect element, no form exists and there are no errors - WTF?
My file is called index.blade.php
Within my routes.php:
Route::get('/', function()
{
return View::make('index');
});
The documentation makes it look so easy
As lagbox says you probably just need to extend a layout. So you have master.blade.php (in a layouts folder in your view probably) which has your HTML head/body tags etc:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/dist/css/app.min.css" rel="stylesheet">
</head>
<body>
#yield('content')
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Then you have your index.blade.php file which will have something like this:
#extends('layouts.master')
#section('content')
{{ Form::open() }}
{{ Form::label('username', 'Username:') }}
{{ Form::text('username') }}
{{ Form::close() }}
#stop
Take a look at the Laravel Blade documentation for more info: Laravel Blade
file: app/route.php
Route::get('/', function()
{
return View::make('home');
});
file: app/views/home.blade.php
{{-- Blade comment. --}}
#extends('layouts.base')
#section('head')
<link rel="stylesheet" href="second.css" />
#stop
#section('body')
<h1>Heading</h1>
<p>Hello Home!</p>
#stop
file: app/views/layouts/base.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
#section('head')
<link rel="stylesheet" href="style.css" />
#show
</head>
<body>
#yield('body')
</body>
</html>
When I access to laravel.localhost/
It only output
#extends('layouts.base')
but however, if I remove the
{{-- Blade comment. --}}
then it works perfectly.
May I know what is the issue?
The first line in your extended blade view must be the #extends directive.
Yes it is a convention by the devs.
Look at BladeCompiler.php on line 119.
protected function compileExtends($value)
{
// By convention, Blade views using template inheritance must begin with the
// #extends expression, otherwise they will not be compiled with template
// inheritance. So, if they do not start with that we will just return.
if (strpos($value, '#extends') !== 0)
{
return $value;
}