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

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!

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

Laravel ships with axios and its imported in bootstrap.js, so simply go to bootstrap.js and add this:

window.axios.defaults.baseURL = 'http://example.test';

You can add this after window.axios.defaults.headers.common line

-Additional information:

axios.create will make an instance that has its own global url and configurations. use this if you have multiple urls or configuration and you want to use it in different components.