Menu
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"
}
}
208
Yes, you can use Laravel with Vue js. Both of them support single page applications, and this combination allows you to be a full stack developer within a single project.
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue. use(VueRouter); import App from './components/App'; Vue. component('nav-section', require('./components/Navigation')); const app = new Vue({ el: '#app', components: { App }, router, });
While you use Laravel and Vue JS together, you can create applications with excellent user interfaces and avoid having to reload the page when switching between components. In this full-stack configuration, Vue Js provides great speed and performance, while Laravel gives dependability and stability.
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.
172
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
})
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
