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
    })
}

Stesha

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!

Bernstein

document.head.querySelector('meta[name="api-base-url"]').content; this will cause problem during tests (vue testing), – Readjustment

@EmekaMbah Does this question solve your problem: #49821328? – Bernstein

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

Villeinage

I don't understand what do you mean by config.js – Stesha

You can keep a config file where you store all sort of configurations and images import it in places necessary – Villeinage

Awesome Solution – Intact

I prefer to go with this solution, the solution by @Bernstein causes issue during test, since document.head.querySelector('meta[name="api-base-url"]').content; is not available. – Readjustment

Answer 3

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.

Teutonize

Answer 4

Create vue.config.js in Project root directory( if not exist ) -

In vue.config.js -

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/demos/app/'
        : '/'
}

Then, Add the line in resources/js/bootstrap.js -

const {publicPath} = require("../../vue.config");
window.axios.defaults.baseURL = publicPath

Tigre

Answer 5

.env

MIX_APP_URL="${APP_URL}"

resources/js/bootstrap.js

window.axios = require('axios');
window.axios.defaults.baseURL = process.env.MIX_APP_URL;

Update your APP_URL in .env file and add the above code on respective files.

Combine