Level 53
Which resource did the server fail to load?
May 26, 2018
21
Level 14
Laravel and Vue error
Hi, I was starting a new product and trying to use VueJS but it gives me the error
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
I'm trying to echo out message from app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
data: {
message: 'Hello World'
}
});
And this is my master.blade.php file
<div id="app">
@include ('partials.navbar')
@yield ('header')
@yield ('content1')
@yield ('content2')
@include ('partials.contact')
@include ('partials.footer')
{{ message }}
</div>
Level 14
What do you mean?
Level 53
So, I am supposed to guess what resource is not loading as the error message indicates? Come on now.
Vuejs is not the cause of your server error.
Level 14
So I'm using this extension on Chrome but it says that Vue is not detected.
I'm trying to bug fix Vue JS be simple to print out and Hello World message and I have my script tag in the bottom of my master.blade.php layout file and then a div#app over that
Level 53
Sometimes you have to close chrome dev tools and then open it again for chrome to detect the plugin.
Comment out your partials and includes because your vue code is fine.
Oh, you must compile your JS too.
Level 14
And the error message is:
Failed to load resource: the server responded with a status of 500 (Internal Server Error) portfolio.test/
Level 53
Is that file the one you are trying to echo out message in? If not, then get rid of that file...move it temporarily and run again.
Level 14
Now I get
Use of undefined constant message - assumed 'message' (this will throw an Error in a future version of PHP) (View: /Users//websites/portfolio/resources/views/layouts/master.blade.php) (View: /Users//websites/portfolio/resources/views/layouts/master.blade.php)
Level 14
Yes
Level 14
And Vue is still not detected be Chrome
Level 53
Ok, it seems that Vue is maybe not compiled. Have you run npm install and then npm run dev?
Level 14
Done that, doesn't work...
Level 53
Hmm, what are you using to run the site? Valet? Homestead?
Also, make sure you are linking to the app.js file in your layout.
Level 14
Valet
Level 14
I have another product and using VUE there and it's no problem
Level 53
Show your layout so we can make sure you are showing you JS and CSS files from mix output. If not using versioning, then use:
// in head
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
// end of body
<script src="{{ asset('js/app.js') }}"></script>
Seems like Vue is not available to me.
Level 14
<title>Hjörtur Freyr - Web Developer</title>
{{-- STYLESHEET --}}
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script defer src="https://pro.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-d84LGg2pm9KhR4mCAs3N29GQ4OYNy+K+FBHX8WhimHpPm86c839++MDABegrZ3gn" crossorigin="anonymous"></script>
@yield ('header')
@yield ('content1')
@yield ('content2')
@include ('partials.contact')
@include ('partials.footer') --}}
{{ message }}
</div>
<script src="{{ asset('js/app.js') }}"></script>
Just added these lines but nothing changed
Level 53
I would refresh the browser cache then.
Level 14
I got it to work! I had to add @ in front of {{message}}
Level 14
Thanks @ejdelmonico for your help!
Level 1
:) Excelente ... thanks .... @{{ message }}
Please or to participate in this conversation.