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

score 25 · Accepted Answer · answered Sep 01 '17 at 09:25

25

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!

answered Sep 01 '17 at 09:25

Rwd

34,180
6
64
78

document.head.querySelector('meta[name="api-base-url"]').content; this will cause problem during tests (vue testing), – Emeka Mbah Feb 28 '21 at 15:02
@EmekaMbah Does this question solve your problem: https://stackoverflow.com/questions/49820828/during-testing-a-vue-component-in-jest-document-queryselector-always-returns-nul? – Rwd Mar 01 '21 at 08:03

score 5 · Answer 2 · answered Sep 01 '17 at 09:12

5

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

answered Sep 01 '17 at 09:12

Nafiul Islam

1,220
8
20

I don't understand what do you mean by config.js – Naresh Sep 01 '17 at 14:48
You can keep a config file where you store all sort of configurations and images import it in places necessary – Nafiul Islam Sep 01 '17 at 16:08
Awesome Solution – Alaksandar Jesus Gene Jul 05 '19 at 03:18
I prefer to go with this solution, the solution by @Rwd causes issue during test, since document.head.querySelector('meta[name="api-base-url"]').content; is not available. – Emeka Mbah Feb 28 '21 at 15:05

Pooria Honarmand · Answer 3 · 2019-10-13T07:47:30.583

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.

score 0 · Answer 4 · answered Oct 17 '21 at 06:20

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

Shrestharikesh · Answer 5 · 2022-09-17T15:06:00.543

0

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

edited Sep 17 '22 at 15:06

answered Sep 17 '22 at 10:55

Shrestharikesh

820
7
13

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

5 Answers5