Home Laravel Vue Laravel Tutorial Part 2

Vue Laravel Tutorial Part 2

by therichpost
Vue Laravel Tutorial Part 2

Hello to all, welcome to therichpost.com. In this post, I will continue with, Vue Laravel Tutorial Part 2.

You can see Vue Laravel Tutorial Part 1 by open below link:

Vue Laravel Tutorial Part 1

In this post, I will tell you, How to call Vue Component in laravel View. Both Laravel and Vue are very famous and we can easily make SPA(Single page Application) with both of them .I am happy to share this post. 

Here are the following steps:


1. First, you need to create the laraveVue.blade.php file in resources\views folder and add below code into it:

With this code, we will call Vue Component into laravel Blade template file:

<div id="app">
<script src="{{asset('js/app.js')}}"></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">


2. Second, you need to create new route code in routes \ web.php file:

With this code, we will call laravel Blade template file:

Route::view('/laraveVue', '/laraveVue');


3. Third, open two terminals into your project folder and run below commands into both the terminals:

These are the commands, we need to run to see working code:

//terminal One
php artisan serve

//terminal Two
npm install

npm run watch

project terminals


4. In the end, you will see below output:

Output is coming from Vue Component in Laravel blade template file:

Vue Laravel Tutorial Part 2

If you have any query related to this post, then please do comment below or ask questions.

You may also like


바카 September 18, 2018 - 8:50 pm

This design is wicked! You definitely know how to
keep a reader amused. Between your wit and your videos,
I was almost moved to start my own blog (well, almost…HaHa!)
Wonderful job. I really enjoyed what you had to say, and more than that,
how you presented it. Too cool!

Ajay Malhotra September 19, 2018 - 1:51 pm

Thank you..

Dylan Cooper September 23, 2018 - 3:11 pm

Instead of linking to our app.js and app.css manually on all new blade files, we can just extend what has been provided already for us by Laravel in our blade templates using @extends(‘layouts.app’) .

If you look at /views/layouts/app.blade.php you will see that the base Laravel layout has already been prepared for us. All we have to do is modify this to how we want our general site layout to look and then add the @section(‘content’) … @endsection

We can add our Vue components within our ‘content’ sections, which will be yielded into our master blade template.

Ajay Malhotra September 24, 2018 - 5:33 am

Hey Dylan Cooper, you are right and i will do that in future posts.
Thank you


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.