VueJS Setup in Laravel
Question
I installed VueJS2 for usage in laravel. Starting with a simple test setup, this is app.blade.php
<!DOCTYPE html>
<html>
<head>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEDIFAKTOR - @yield('title') </title>
<link rel="stylesheet" href="css/vendor.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
@include('layouts.navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Page wrapper -->
@include('layouts.topnavbar')
<!-- Main view -->
@yield('content')
<!-- Footer -->
@include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
<script src="js/app.js" type="text/javascript"></script>
<script>
var data = {
message: 'Greetings your majesty'
};
new Vue({
el: '#app',
data: data
})
</script>
@section('scripts')
@show
</body>
</html>
and this the content I want to display
index.blade.php
@extends('layouts.app')
@section('title', 'Main page')
@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="text-center m-t-lg">
<h1>MEDIFAKTOR server</h1>
</div>
<div id="app">
<h1>{{message}}</h1>
</div>
</div>
</div>
</div>
@endsection
When I refresh, I get the error:
ErrorException in 80e040fb5fff0b0cf766194784388a0cd255e6c9.php line 10: Use of undefined constant message - assumed 'message' (View: /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)
This sounds to me, like VueJS is not recognized. I installed according to VueJS website and laracasts.com
Did I place it a the wrong spots?
Package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0"
}
}
4 answers
solution1
3 2016-12-18 19:28:17
Try to use @{{message}} instead of {{message}} in your index blade. because your message is not php variable its JS framework variable. put @ sign before the variable.
solution2
1 2017-03-13 23:51:10
If you solved the problem with sign @ , but still get an error "Vue is not defined", as you said in the comment, you have a typo in your code - you should use attribute src , not scr . So the correct including of the vue.min.js should looks like that:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
Also you can get a problem when your JS code is starting to execute before vue.min.js is loaded, try to use onload event for vue JS file:
<script onload="vueIsReady()" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script type="text/javascript">
function vueIsReady(){
var data = {
message: 'Greetings your majesty'
};
new Vue({
el: '#app',
data: data
})
}
</script>
Or you can use importScript function from this: https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement
// definition of the function importScript ...
// call function importScript with two parameters - script URL and onload handler function
importScript('https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js', function(){
function vueIsReady(){
var data = {
message: 'Greetings your majesty'
};
new Vue({
el: '#app',
data: data
})
}
});
solution3
0 2017-01-01 23:55:03
If you're having problems getting to render vuejs' curly braces {{}}. @{{}} should do the trick or to make things simpler you may consider blade's @verbatim html code {{vuejs_vars}} @endverbatim
verbatim tags in blade make sure that any between them doesnt get parsed by the blade engine & are printed as is.
solution4
0 2017-02-24 16:21:06
Vue is declared in assets/bootstrap.js. So, check there. If it's in place, perhaps debug at the created hook on the Vue instance:
created: function () {
console.log('instance created')
}
Try to debug from there.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.