I have a Laravel application where I use the mix function in my blade templates to include my css and js files like this:
<script src="{{ mix('js/app.js') }}"></script>
This works locally but when I deploy the app to the production server, the mix function still inserts the local paths:
<script src="//localhost:8080/js/app.js"></script>
The APP_URL in the .env file is set and I've also cleared the Laravel caches.
Any ideas what could be wrong?
I've recently started a new Jetstream project with Livewire. I've been playing around with setting up my base layout etc and I keep getting a message in the console (which I'm not sure if its mucking up what I'm trying to do with Alpine). In the console it says:
Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire's scripts are loaded before Alpine
Which is confusing me as I am not loading AlpineJS anywhere else. I don't have any CDN references anywhere in my base templates. Alpine is only referenced once where it gets set up which was automatically generated when I first created the jetstream project (under resources/js/app.js).
My understanding is that Livewire already loads Alpine automatically. So why would this error come up?
If you installed alpine as a module and you are having this error, go to your layout file (app.blade.php) or whatever full livewire page that's giving this error or where you imported your livewire scripts and app.js file, then import your livewire scripts before app.js e.g
#livewireScripts
<script src="{{ asset('js/app.js') }}"></script>
instead of the old way:
<script src="{{ asset('js/app.js') }}"></script>
#livewireScripts
I'm a bit lost here. I'm NOT new to Laravel Mix so this is really confusing.
I have a layout blade file and it looks something like this
<html> ....
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js"></script>
<script src="{{ mix('/js/myjs.js") }}></script>
</body>
</html>
The myjs.js is compiled using Laravel Mix and contains dozen of libraries and all of them compile and work properly.
However if I include this
require('katex'); //so it's above everything else to simulate situation from above, when it's included in the layout file
...
and drop the CDN script from the layout file - the Katex library won't work.
I tried using require('katex/dist/katex.min.js') but still nothing. The katex.min.js file in the library and the one in CDN are the same.
I'm not expert on npm and I only use it to fetch libraries and then merge and minify them in my Laravel app.
Can anyone help me pin point the problem here or point me to what am I doing/getting wrong here?
Shouldn't the
<script src="lib1.js"></script>
<script src="lib2.js"></script>
included in the html, and
require('lib1')
require('lib2')
compiled to
<script src="{{ mix('compiled.js') }}"></script>
produce the same thing?
Thanks!
UPDATE:
I'm using Katex to implement this summernote plugin.
Katex should be installed as:
window.katex = require('katex');
I am working in Laravel 5.4, and Vue components are not showing/updating.
I start a new project and create a route /chat in web.php
This is chat.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
<example></example>
<chat></chat>
</div>
<script type="text/javascript">
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
<script src="js/app.js"></script>
</body>
</html>
This is app.js
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/Chat.vue'));
const app = new Vue({
el: '#app'
});
Example and Chat components are some basic templates, I am not passing any data, just plain text.
Chat.vue
<template lang="html">
<div id="content">
<h1>Messages</h1>
<p>Message text</p>
<small>Hiii</small>
</div>
</template>
<script>
export default {
}
</script>
When I run php artisan for the first time, everything works. I try to edit some text in Chat.vue, like change 'Hiiii' to Hello, when I reload the page it won't change, it just stays the same. I tried restarting the pc, running php artisan again, anything I could think of.
I tried putting some Vue code directly in chat.blade.php, and than it works. It looks like it is not detecting changes in app.js and components.
FYI, I even deleted the Example.vue component. It still appeared on the page.
The best way to solve this problem is to update npm because it will update all the packages and install missing packages, as a result you will have laravel mix compiling your assets; right now you are not able to do so.
npm update
For some people an easier solution can work which is to run the watch-pol command
npm run watch-poll
Have you tried to clear browser cache? This should solve the problem.
everyone I just got the answer and I want to share this with everyone.
Problem:- I am learning Vue js and I need to delete browser history every day to see changes I have made in the editor.so I search for that and not found a valuable answer for this. but as now I got the solution so I decided to share this solution with everyone.
all you need to do is
1)Go to developer tools.
2)Click on the Network tab
3)Click disable cache (Look at the highlighted portion in the image below)
4)Refresh your page again!
Sometime copying code from internet we add some unwanted line.
Just check this line from App/Config/app .
Make sure it is in Development mode.
'env' => env('APP_ENV', 'development'),
copy this code in app.blade.php :
const app = new Vue({
el: '#app'
});
When I am trying to initialise javascript and css, I am getting an problem in path. It takes only root URL.
Eg. I have initialize
<script type="text/javascript" src="/bower_components/angular/angular.js"></script> then
it takes
<script type="text/javascript" src="http://localhost/bower_components/angular/angular.js"></script>
The file must be
<script type="text/javascript" src="http://localhost/myapp/bower_components/angular/angular.js"></script>
instead of
<script type="text/javascript" src="http://localhost/bower_components/angular/angular.js"></script>
Same problem with the Ajax.
Thanks,
Hasmukh
Your problem is not Laravel but that you're doing your HTML wrong.
If you application doesn't sit on the root of the site, then using root-relative URLs like "/some/url/here" will never work.
Luckily, Laravel can help you out there - you need to use its helpers for including assets:
{{ HTML::style('css/site.css') }}
{{ HTML::script('js/site.js') }}
{{ HTML::image('images/logo.png') }}
Or if you need to use an asset URL in some other form:
Download the file
You may have to set the URL to your application at the top of app/config/app.php though (especially if you need absolute URLs here, for example in HTML emails).