I'd like to use a JavaScript function in my blade.php file. I created the xyz.js file with a very simple function
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. So far so good, npm compiled my script and the picture function was included in the app.js file. Now I'd like to add a form in blade.php and call the picture function on click. I created the following blade.php file:
#extends('layouts.app')
#section('content')
<div class="container">
<form>
Enter url: <input type="text" id="someID">
<input type="button" onclick="picture($('#someID').val())" value="Click"/>
</form>
</div>
<script src="{{ mix('js/app.js') }}"></script>
#endsection
And here I got really lost (btw: I was always the backend guy). On page reload browser displays
[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
And when I click the button I have
Error new:76 Uncaught ReferenceError: xyz is not defined
I understand that the first errors says that the app.js file was not loaded and that's the reason why picture is not found. How should I include app.js or any other compiled by mix JavaScript file? Is it really the tag causing this problem?
Try this I solved me
<script src="{{ asset('js/app.js') }}?time={{ time() }}"></script>
" I think not all browsers support this "
I think you're getting the error because you're placing a new script tag inside of the vue.js application div.
If you're opening your layout file app.blade.php there is a div with id="app" and inside it you're having your content section yield. Side-effect means that you shouldn't load a new script inside a Vue.js template.
The script should be in your layout at the end of the body tag. Also the script tag should look like this:
<script src="{{ asset('js/app.js') }}"></script>
Then your script should be available. But I would have a look at Vue.js and how you're handling click events there. click handler docs
Related
I added <script type="text/javascript" src="js/app.js"></script> in Blade file. But I am not getting output when I am browsing. I used php artisan view:clear and php artisan optimize:clear command. But the output is as like before.
I added <div id="app"><prayer_time></prayer_time></div>. This is working fine.
How can I solve the issue ?
You are most probably putting the script part outside of the #section block in your template, which in turn does not render anything.
If you only need the script on that particular page, I would suggest using the #push method, like this in your template file:
#push('scripts')
<script type="text/javascript" src="js/app.js"></script>
#endpush
Here you can read more about the #push functionality.
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 tried lot of ways to fix this problem from stackoverflow, laracast, google but nothing works,
-> I think my vue.js is not loading or working(Im using sublime text, all files showing highlighted or colored text except ExampleCmponent.vue file), npm run watch successfully but vue devtools also not deteceting any vue.
-> I also tried:
<div id="app">
<example-component></example-component>
</div>
Im sharing screenshots with you please help me out if possible:
ExampleComponent.vue
home.blade: i also tried without #id tag->
chrome:vue devtools:
here is app.js:
I tried:
Laravel 5 VueJS not working
https://laracasts.com/discuss/channels/vue/example-component-not-working
https://laravel.com/docs/7.x/frontend
What you have done here is called Fronend-Scaffolding. You still need to Compile Assets.
Open your webpack.mix.js and add your .js & .scss files. Once done, confirm files are in public /js /css folder.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Then, add below lines in your blade.
// use mix() for cache bursting. Or simply stick with asset()
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
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'
});
I try to load asset JS in tempalte blade:
<script src="{{ asset('js/angular_my.js')}}"></script>
In console Chrome I get JS error:
http://localhost/public/%7B%7B%20asset('js/angular_my.js')%7D%7D
If to show source HTML code I see:
<script src="{{ asset('js/angular_my.js')}}"></script>
In my case, I was missing .blade at the end of the filename in my laravel store directory
Asset looks from Public folder. That is why your file should be in: public/js/ directory. Hope it helps