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'
});
Related
I use Laravel with Vuejs, and I would like to know which assets I need to import on my components.
Usually with only Laravel, I import the ones coming from the public folder (webpack before).
But here with VueJS I have to import those from the resources folder (not yet switched to webpack), or the same as for Laravel, I take those from the public folder?
PS: When I npm run watch, it's running me in a loop, with the assets coming from the public folder.
Thank you in advance
you should import Public assets.
in View:
<head>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="app">
<vue>
</vue>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
Since you're using VueJS i'll recommend to use mix() instead of assets() since mix will help you to don't clear cache to get new update on your site while it's online.
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 have installed vue.js by following these steps in Laravel 5.6 and all other dependencies are working perfectly. Only Vue.js is not responding.
npm intall
npm run dev
npm run watch
I am sharing all the codes on I have added. I have created a id="app" in my html file.
<div id="app">
<div class="container">
<articles></articles>
</div>
<!-- I used this link in my html file for connecting with app.js file
-->
<script src="{{asset('js/app.js')}}"></script>
I edited the app.js file that is as under.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles', require('./components/Articles.vue')
);
const app = new Vue({
el: '#app'
});
I also created Articles.vue file and linked that to app.js. But my html page is showing nothing.
My file in components/Articles.Vue
<template>
<h1>Hello World!</h1>
</template>
Console is showing no errors
Vue Tab
When I inspect DOM, I get this
This is the Vue file. It is also not showing any tags
As ceejayoz said in the comment: Rename it to e.g. articleElement and use it as <article-element></article-element>
this thread is a bit old, but as i had the same problem as you had (maybe we both watched the same youtube video "Full Stack Vue.js & Laravel"), i will still share my solution. With some research and a lot of trying around i landed on the official Laravel page (https://laravel-mix.com/docs/6.0/what-is-mix).
The last task of this guide "npx mix" did the job for me. Everytime i change some of my js files now i use this little command to compile again and all my changes take place.
Hopefully this will help some others too :)
I'm starting to work with laravel and I try to use Vue. So on my resources/assets/js/app.js I have
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
So my Example.vue is basicly what it's given with laravel. And in my welcome.blad I have
#extends('layouts.app')
#section('content')
<example>
</example>
#endsection
<script src="{{ elixir('js/app.js') }}"></script>
in my package.json I have :
"devDependencies": {
"vue": "^2.1.10",
"vue-resource": "^1.0.3"
}
But Nothing appear in my welcome page. I ran npm install npm run dev And change several things in my script, don't remember all but tried a lot of things and can't make it work
Laravel includes in the stock templates some default handling for CSRF tokens.
Uncaught TypeError: Cannot read property 'csrfToken' of undefined
means you've taken this out or broken it in some way, preventing the rest of the JS from running.
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