Can Livewire consume an API Laravel?

#1

I am beggining to use livewire with laravel, a didnt see anything about this. Could you please tell me how i could use livewire in that way? there are some videotutorial for it?. I would like create a app in Laravel for multiple platforms (using livewire and tailwindcss for web app in frontend, but i want to have the API ready for Android or IOS fronted frameworks), i hope i can make me understand.

Thank you!

#2

Livewire it’s just a package after all, and with it, you don’t need to create an extra API’s to handle SPA application for example or something like that, you can use it just in only a form in your entire application and it’s OK

You can use livewire in desktop version, and with the resources API uses the normal laravel controllers.

Website

// routes/web.php
Route::get('posts', PostIndex::class)->name('post.index') // livewire way

for phone for example

routes/api.php
Route::get('posts', App\Http\Controllers\PostController::class, ['index']); // laravel 8 way
#3

thanks,

so will i need replicate the routes and controllers in a future when i will want create the same app for android?

#4

In all cases if you want to consume the API, you have to look at api.php file and setup some resources with custom controller, so yeah you need to.

P.S: you must take some times for peaking the right tools for your application before you start creating it, the planing Part is the most important step.

#5

thanks again! In the beggining, i was thinking learn react.js and make an API laravel backend. For desktop and mobile web react.js will be ok to consume the API, and for Android an IOS react-native for consume the API, so i will not need replicate all controllers and routes.

But i saw livewire and it is so simple, and i would like use liveware instead of learn React.js

#6

In my opinion, No need to learn new technology just for use it in a project, use what you are good for, for example, if you know VueJs use NuxtJS as a front-end and Laravel to handle the API’s for both NuxtJS and the Mobile Application…

#7

thank you again, I am old school :), still i use jquery and bootstrap. I am thinking use livewire and tailwindcss and in the future if i need apps for android or ios i will see. what do you think?

#8

Yeah, it’s totally fine you can use Bootstrap, jQuery or TALL Stack and the API it’s another thing to take care of, depend on your project and the requirement.
I highly recommend Learning tailwindcss and livewire with AlpineJS because it’s easy to learn IMHO, and for the mobile app you can build the API’s later on.

#9

ok thank you for you recommendation :slight_smile:
have a nice day!!

#10

You are very welcome mate!
Have a nice day too :wink:

#11

I’m looking for information / examples of consuming external api data. For example: I’m building an application will manage and automate sending ad campaign (geolocation) data to a third-party service that handles publishing ads to the web.

Another example would be creating a project task using the Asana (asana.com) api after an email is sent to a client.

Anyone have an example of doing something like this in a Livewire component?

#12

Hey, @jdmacdiarmid

I think (from my perspective) livewire and API endpoints is totally separated.

Livewire it just a component controlled by JavaScript and the purpose of livewire is to use less JavaScript and focus on building your application as fast as possible.

So you can use livewire components in the parts you need it and use controllers & resources for the API’s.

For example if you have users, and you want to make an API endpoint for them, you can do the following:

Make Controllers\Api\UserController and from there make your collections to consume the API.

And if you want to show the users to the client side make php artisan make:livewire users.user-index and you are good to go.

This is my point of view in this case, maybe right may not.

#13

Thank you for your reply. I"m not writing the api endpoints for external apps to consume. I want my app to talk to an external service hosting the api. Your example sounds more like an internal api application that makes endpoints available to the public. I have yet to find an example showing how to do a get or post to an external / third-party endpoint using guzzle to Google Maps api.

#14

You can combine with JavaScript and livewire components to get your point.

I write a blog post talking about how to use Google captcha with laravel livewire, it may help you and gives you an example how to use external APIs in your case.

Let me know if you have any questions.

#15

I think you can use a livewire component for each of the endpoints, I have done that and it works perfectly. It even allows you to integrate other methods of the same component easily. However, you cannot have several endpoints in a single component because the path goes to the mount method. For this it is better to use a normal controller. I think that the integration of all this is to bring the main functions to the controllers, which serve you to call them from the REST Api and at the same time to call it for other livewire components