Categories

Friday, March 29, 2024
#919814419350 therichposts@gmail.com
LaravelLaravl 5.7VueJs

Vue Laravel Tutorial Part 2

Vue Laravel Tutorial Part 2 - The Rich Post

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">
    <example-component></example-component>
</div>
<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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

4 Comments

  • 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!

  • 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.

Leave a Reply

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