How to set root/base url for a laravel-vujs project?

Question

I've deployed a VueJS project to a domain like www.example.com/demos/app, But when I send a request to api from axios it is pointing to www.example.com/login instead of www.example.com/demos/app/login

Here is my request code using axios

export const login = ({ dispatch }, { payload, context }) => {
    return axios.post('/login', payload).then((response) => {
        // do something
    }).catch((error) => {
        // handle erros
    })
}

Answer 1

One way you could go about this is to add a meta tag to the head of your page (like you may do with the csrf) and then reference it in your bootstrap.js file:

head

<meta name="api-base-url" content="{{ url('demos/app') }}" />

bootstrap.js (underneath window.axios = require('axios');)

window.axios.defaults.baseURL = document.head.querySelector('meta[name="api-base-url"]').content;

Hope this helps!

Answer 2

In config.js:

const CONFIG = {
  API_URL_ROOT: 'http://localhost:8000/api/v1/',
}

export default CONFIG;

You can set axios default like this:

import config from '../config.js';

axios.create({
  baseURL: config.API_BASE_URL
});

Or you can just set path by importing API_BASE_URL from config and then point it each time you make a get/post/put/delete call using axios