In Vue cli project, where to place Laravel api app and how to call api in vue js?

Question

vue app is inside : C:\xampp\htdocs\booking

Laravel api is inside : C:\xampp\htdocs\booking-api

FYI : vue app is working on http://localhost:8080

If the folder structure is like above, then app works fine i can call the api like this,

axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);

But I want booking-api folder inside booking folder. If I place it and if I call the api like below,

axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);

It wont work and the console window is like this,

Request URL:http://localhost:8080/booking-api/public/Rooms
Request Method:GET
Status Code:404 Not Found

So, how can I place api project inside vue app and how to call the api from vue.

When you placed booking-api inside booking did you re-serve your server or not ? — Maraboc
– Maraboc, Commented Jul 20, 2017 at 7:39
Can't you just setup two virtual hosts each one with a named domain? Much much easier that way. — apokryfos
– apokryfos, Commented Jul 20, 2017 at 7:49

Ravi · Accepted Answer · 2019-10-03 10:39:41Z

2

Okay i guess you used vue.js webpack build in your project. Steps.

Now your api-part

It doesn't matter where you put it. Install laravel using follow normal procedures;serve it using php artisan serve. it will run normally on 127.0.0.1 or localhost:8000.
Lets assume: a script on a sample component axios.post('localhost:8000/api/postData',data).then((response) => {//do something here}

While posting here you should take care of the Cross Origin Resource Sharing, or may be csrf issues if you remove the existing component.

answered Sep 14, 2017 at 9:52

Ravi

1201 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1