**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
Related
To be honest, I'm having trouble understanding the concept of Laravel how to build in and use its assets (css, js). I guess I'm using a wrong but still working way even for production.
My approach for Production
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Step 1: npm run build
Step 2: Manually copy the newly generated js and css files into my public folder.
Step 3: Change the file names in my bladetemplate. So app.11111.js to app.js
Note: This doesn't feel right but it worked for Production. I would be very grateful for any hints on this.
Here is my layout.blade.php file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght#400;600;700&display=swap">
<link rel="stylesheet" href="{{ asset('assets/css/main.css') }}">
<!-- Scripts -->
#vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100" style="min-height: 100vh; display:flex; flex-direction:column;">
#include('layouts.navigation')
<!-- Page Content -->
<main>
#yield('content')
</main>
#include('templateparts.footer')
</div>
<script src="{{ asset('assets/js/app.js') }}"></script>
</body>
</html>
I have a Laravel app that uses a tiny bit of Vue code in the blade templates. There's a problem navigating from view to view, almost every time there's a brief delay before the CSS is loaded where the raw text of the page shows without any formatting. It shows for about 1/2 a second and then the CSS kicks in and it looks correct. I can't find any reason for this, I tried changing the mix('css/app.css') etc so that it's not having to reload every time, but I can't figure out how to fix it.
I'm not sure if Vue is somehow delaying the css from loading? Any ideas what it could be? I'll paste the top section of the blade template below. I just upgraded to Laravel 8 but the same was happening with Laravel 7.
Thanks for your help!
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="title" content="Pono Admin">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/admin.css') }}" rel="stylesheet">
#hasSection('style')
#yield('style')
#endif
<!-- Scripts -->
#hasSection('script')
#yield('script')
#else
<script>
var vmMixinsAdmin = '';
</script>
#endif
<script src="{{ mix('/js/app.js') }}" defer></script>
<script>
var vmMixinsApp = '';
let vroundedBtn = false;
let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
</script>
</head>
<body>
<div id="vm">
<main id="app-main" class="container-fluid px-0">
etc
Someone had something similar and decided to show an overlay on foreground and hide it after the page has loaded. I'm not sure that it's the best solution but it could help:
Force browsers to load CSS before showing the page
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 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 have a blade template that I created and I want to add css files depending on the page that it is called to.
The file below is the main file called ._head.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="">
<title>{{ 'Login' }}</title>
<!--Core CSS -->
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
{{ HTML::style('asset/css/bootstrap-reset.css') }}
{{ HTML::style('asset/assets/font-awesome/css/font-awesome.css') }}
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
<!-- Custom styles for this template -->
#yield('addcss')
<!-- Ends Here -->
{{ HTML::style('asset/css/style.css') }}
{{ HTML::style( 'asset/css/style-responsive.css') }}
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>{{ HTML::script('asset/js/ie8/ie8-responsive-file-warning.js') }}<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
I tried to add css to the above template using
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#include('layouts._header')
But the contents of the #section and the _head are now showing up inside the body tag after the contents of _header template are displayed. What am I doing wrong here ? Thanks in advance.
You cant "include" something on the same file you "extend" without wrapping it in a section. You should do this:
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#section('header')
#include('layouts._header')
#stop
then in your .heads file put the yield of 'header' at the very bottom (or wherever you want it)
....
#yield('header')
</html>
Or if the file remains the same in all views - just do this in .heads
....
#include('layouts._header')
</html>