How to set URL for axios? - laravel

Question

I am creating a request from client with nuxtjs to laravel server. but the url request sent is http://localhost:3000/undefined/api/auth/signin instead of http://127.0.0.1:8000/api/auth/signin. I know this is simple question but I can't figure out how it works with nuxt and laravel
.env file
APP_URL=http://127.0.0.1:8000/
CLIENT_URL=http://localhost:3000/
import axios from 'axios'
const API_URL = process.env.APP_URL +'/api/'
...
axiosPost(urlSuffix, data) {
return axios.post(API_URL + urlSuffix, data, {
useCredentials: true,
headers: authHeader()
})
.then(response => {
return response.data
})
...

Answer 1

If you are using laravel-mix, (React, Vue or even Vanilla JS file which compiled by mix):
In your Javascript file:
import axios from 'axios'
const API_URL = process.env.MIX_APP_URL +'/api/'
// rest of your code...
Add this in your .env file:
MIX_APP_URL="${APP_URL}"
And re-compile your scripts by npm run prod, or npm run dev or npm run watch. Whichever you need.
If you are using in blade file, process.env isn't accessible there. Instead, add this:
const API_URL = {{url('/')}} +'/api/'
If you are using standalone nuxt.js:
Add in nuxt.config.js
export default {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
appUrl: process.env.APP_URL,
}
}
And in your js file:
import axios from 'axios'
axios.create({
baseURL: process.env.appUrl
});
// rest of your code