update - laravel vue github
Configuración VueJS en Laravel (4)
Intenta usar @ {{mensaje}} en lugar de {{mensaje}} en tu hoja índice. porque su mensaje no es php variable es su variable de marco JS. poner @ signo antes de la variable.
Instalé VueJS2 para su uso en laravel. Comenzando con una configuración de prueba simple, esta es 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>
y este es el contenido que quiero mostrar
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
Cuando actualizo, obtengo el error:
ErrorException en 80e040fb5fff0b0cf766194784388a0cd255e6c9.php línea 10: uso de mensaje constante indefinido - se supone ''mensaje'' (Ver: /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)
Esto me suena, como que VueJS no es reconocido. Instalé de acuerdo con el sitio web VueJS y laracasts.com
¿Lo coloqué en los lugares equivocados?
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"
}
}
Si tiene problemas para renderizar las llaves de vuejs {{}}. @ {{}} debería hacer el truco o para simplificar las cosas, puede considerar el código @verbatim html de blade {{vuejs_vars}} @endverbatim
Las etiquetas literales en la cuchilla se aseguran de que ninguna de ellas sea analizada por el motor de la cuchilla y se impriman como están.
Vue se declara en assets / bootstrap.js. Entonces, mira allí. Si está en su lugar, quizás depurar en el gancho creado en la instancia de Vue:
created: function () {
console.log(''instance created'')
}
Intenta depurar desde allí.
Si resolvió el problema con sign @ , pero sigue apareciendo el error "Vue no está definido", como dijo en el comentario, tiene un error tipográfico en el código: debe usar el atributo src , no scr . Entonces, la correcta inclusión de vue.min.js debería ser así:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
También puede tener un problema cuando el código JS se está comenzando a ejecutar antes de cargar vue.min.js, intente utilizar el evento onload para el archivo vue JS:
<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>
O puede usar la función de importación de este: 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
})
}
});