I'm trying to build a comment system with Vue.js in my Laravel application. I can't seem to get Vue to work though and I keep getting a "Vue not defined" error in my console. Does anyone have any thoughts on why this might be? My code is below.
show.blade (where I want to render Vue)
<div class="col-12 currentComments">
<hr>
<div id="" v-for="comment in comments">
<p><a href="">@{{comment.user.name}}</a></p>
<p class="comment">@{{comment.body}}</p>
<span style="color: #aaa;">on @{{comment.created_at}}</span>
<button class="deleteComment" data-token="{{ csrf_token() }}">Delete Comment</button>
</div>
</div>
Script at the bottom of my show.blade file
@section('scripts')
<script>
const app = new Vue({
el: '#app',
data: {
comments: {},
commentsBox: '',
recipe: {!! $recipe->toJson() !!},
user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!}
},
mounted() {
this.getComments();
},
methods: {
getComments() {
axios.get('/api/recipes/' + this.recipe.id + '/comments')
.then((response) => {
this.comments = response.data
})
.catch(function (error) {
console.log(error);
}
);
},
postComments() {
axios.post('/api/recipes/' + this.recipe.id + '/comment', {
api_token: this.user.api_token,
body: this.commentBox
})
.then((response) => {
this.comments.unshift(response.data);
this.commentBox = '';
})
.catch((error) => {
console.log(error);
})
}
}
})
</script>
@endsection
Comment Controller (just index method)
public function index(Recipe $recipe)
{
return response()->json(
$recipe->comments()->with('user')->latest()->get()
);
}
Routes/api.php file
Route::get('/recipes/{id}/comments', 'CommentsController@index');
Layout file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="{{asset('css/select2.min.css')}}">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Raleway" rel="stylesheet">
<!-- JavaScript -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<title>Plant Lab</title>
</head>
<body>
<div id="app">
@include('includes.messages')
@yield('jumbotron')
@yield('content')
@yield('scripts')
</div>
<script src="{{asset('js/custom.js')}}"></script>
<script src="{{asset('js/select2.min.js')}}"></script>
</body>
</html>
Please help. I can't figure this out Thank you!
UPDATE
I had to pull in the CDN to my layouts file to make it work. Laravel should come prebundled with Vue.js though. Can someone tell me why I had to do this?
