sorry in advance my english is bad
I have a problem when I will use laravel jetstream for my project. Because when i used stack livewire, the display doesn't match, here I give the output result
enter image description here
And also I've run npm install & npm run dev so it will run development using mix as default
Here I will give the project folder structure
enter image description here
maybe what I can conclude is to change the development process from mix to vite, or there are hints from the experts here on how to solve the problem?.
Thank you in advance
Actually you can fix this issue by replacing the #vite with these one in views/layouts/app and guest blade.
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
because you install previous version of laravel, #vite was added in 9.+ laravel so i think its just bc you using 8. (any <9) version, just install previous jetstream version for example composer require laravel/jetstream:2.7.0
go to resources\views\layouts\guest.blade.php and resources\views\layouts\app.blade.php and replace below code, if its not there, just insert below code in these two files.
and also remember to comment out #vite line, see below screenshot.
see screenshot
I hope it will solve the problem.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
this can help you to solve #vite :
php artisan view:clear
Related
I have installed new larvel project with the name startNew, for the purpose of installing admin-lte I run the command
npm install
This cause a lot of error, if anyone know another route to install admin-lte in laravel 5.7 please help.
I installed AdminLTE in Laravel 5.6 by declaring it as a dependency in package.json
"admin-lte": "^2.4.8",
You can also use composer command, if its not working for you by following command :
composer require "almasaeed2010/adminlte=~2.4"
Reference : https://adminlte.io/docs/2.4/installation
For you though, the problem is just with the connection. Try using different network or try to install using Ubuntu subsystems.
//Update
After running composer try this command
php artisan vendor:publish --tag=adminlte
It will publish the adminlte scripts to your path so you can use something like
For CSS:
<link rel="stylesheet" href="{{ asset('/admin-lte/bower_components/font-awesome/css/font-awesome.min.css') }}">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('/admin-lte/bower_components/Ionicons/css/ionicons.min.css') }}">
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('/admin-lte/dist/css/AdminLTE.min.css') }}">
For JS:
<script src="{{ asset('/admin-lte/bower_components/jquery/dist/jquery.min.js') }}" ></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('/admin-lte/dist/js/adminlte.min.js') }}"></script>
Reference :
How to integrate Admin Lte theme in Laravel 5.4
Update:
Alternate Package:
packagist.org/packages/jeroennoten/laravel-adminlte
I am new to Laravel and have just started learning about views, routes, migrations, etc. I tried to include the Font Awesome CSS library using the link statement, but that didn't work. I found an answer on Stack Overflow that used npm but got an error running npm run dev that was marked as the solved answer. I also tried to use {{ asset() }} as well as several other functions but none of those worked.
What should I do?
Wrap the code in the url method.
<link href="{{ url('new_dedicated_folder/font-awesome.css') }}" rel="stylesheet">
put inside in head tag
if u use cdn
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
if u use local copy
<link href="/css/fontawesome.min.css" rel="stylesheet" />
make sure youre fontawesome copy is inside of public/css directory
After compiing all my assets through laravel-mix. It displays no error and it went build successful that means all my assets were compiled to the dist/css/ folder.
and I referenced it through
{{ HTML::style('dist/css/auth.css') }}
But i get no display from the view. What's wrong with this ?
Make sure you have HTML package installed via Laravel collective
https://laravelcollective.com/docs/5.3/html
If you did already, try to escape {!! HTML::style('dist/css/auth.css') !!}
Utimately you could go back to the original
<link href="{{ asset("dist/css/auth.css") }}" rel="stylesheet">
Maybe you should try to reference it using relative path:
{{ HTML::style('/dist/css/auth.css') }}
If this doesn't work, try:
<link href="/dist/css/auth.css" rel="stylesheet">
By this, you can determine if the problem was in compiling or HTML package.
I'm a new in Laravel and am trying to use the mix.version() in the Gulpfile.js in Laravel 5.3 for cache busting.
this is my gulpfile.js:
elixir(function (mix){
mix.less('custom.less');
mix.version('public/css/custom.css');
});
When running gulp command in my terminal, my less is compiled and versioned correctly, but when I try to include the the following line my view file, it breaks my view:
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
screenshot of my error
Is there a specific include or something I need to call in my view file to ensure the above line of code actually works? If I remove the above elixir line in my view code and hard code link my css file, then it works, but I can't leave it like that as I need versioning for cache busting.
Thanks so much, I have tried the documentation, but not examples exist of how to include the code in the view file.
There is a ' missing
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
should be
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css') }}">
Regarding the question title
{{ elixir('/css/custom.css) }}
is causing the error not the mix.version()
I am using laravel and nodejs on WAMP Server on Windows 10. Now using the elixir mix function
elixir(function(mix) {
mix.sass('app.scss');
mix.version('css/app.css');
});
which is generating a version file for my app.css and placing it to
public\build\css\app-d37b3a9d94.css
now when I add the link of the css file by using elixir function, like following
<link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}">
it generates a path like
/build/css/app-d37b3a9d94.css
but with this, the css do not work on the resulted page. I troubleshoot the problem and found that it do not work due to the first slash in the path. when I manually add the above css file path (which elixir generated) by removing the first slash, it works. like the following
build/css/app-d37b3a9d94.css
I am not sure how to fix this problem where elixir generated path to css file work. Looks like elixir adding an extra slash before the path but I have checked the code on several places for laravel and the code works with first slash in path. Not sure why it is not working for me.
One more thing I have noticed, even if I remove mix.version('css/app.css'); from gulpfile.js (which generate version file) and run gulp command to update css/app.css, and use <link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}"> it still refer to the version file rather than referring to css/app.css Is it a correct behavior?
Try to use it this way:
<link rel="stylesheet" type="text/css" href="{{ asset(elixir('css/app.css')) }}">