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.

Answer 1

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

1. serve your vue.js projet using npm run dev
2. for npm run dev the default server for vue would be localhost:8080

Now your api-part

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

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