Categories

Thursday, May 30, 2024
#919814419350 therichposts@gmail.com
Laravl 5.7VueJs

Handling Laravel 5.7 API data with Vue.js Fetch API

Handling Laravel 5.7 API data with Vue.js Fetch API - The Rich Post

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Handling Laravel 5.7 API data with Vue.js Fetch API?

Vue.js is growing very fast these days and Laravel 5.7 has been released now. Both are very powerful on there area.  Vue.js is getting more response because of its clean coding structure and easy to understand. 

If you have knowledge of Html and javascript then you can easily learn this.

The best thing, I like this about Vue.js is, we don’t need to install complete folder like Angular, we just need to Vue.js CDN and start coding.

Laravel 5.7 also came with some great new features. I personally like laravel because of its flexible features and greate online supports.

 

Here is the working image fetching data and I am showing this data in console:

 Handling Laravel 5.7 API data with Vue.js Fetch API

 

Here, I am going to tell you how all the code works:

 

1. Here is code for Veu.js and I have added this into html file with Veu.js cdn file:

In this file, I have used Veu.js Fetch API used to get the data without use of third party resource.  Fetch is similar to XMLHttpRequest (XHR) but Fetch is better because we just want to request a URL, get a response and parse it as JSON.

<div id="app">
<ul>
<li v-for="user in users">
{{ user }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
users: []
},
created () {
fetch("http://localhost/blog/public/api/sample-restful-apis")
.then(response => response.json())
.then(json =>{
this.users = json
console.log(this.users);
})
}
})
</script>
 2. Here is the laravel api code and you need to add this into your laravel 5.7 routes/api.php file:

In this file, we write the api route path.

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::get('sample-restful-apis', function()
{
return response()->json([
'name' => 'therichpost',
'domain' => 'therichpost.com'
]);
});

 And you are done, if you have any query related to this post, then you can questions or comment below. 

 

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.

Leave a Reply

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