title: Nuxt Axios Dynamic url
body: <p>I manage to learn nuxt by using following tutorial</p>
  
  <p><a href="https://scotch.io/tutorials/implementing-authentication-in-nuxtjs-app" rel="nofollow noreferrer">https://scotch.io/tutorials/implementing-authentication-in-nuxtjs-app</a></p>
  
  <p>In the tutorial, it show that</p>
  
  <pre><code>axios: {
    baseURL: 'http://127.0.0.1:3000/api'
  },
  </code></pre>
  
  <p>it is point to localhost, it is not a problem for my development,</p>
  
  <p>but when come to deployment, how do I change the URL based on the browser URL,</p>
  
  <p>if the system use in LAN, it will be <code>192.168.8.1:3000/api</code></p>
  
  <p>if the system use at outside, it will be <code>example.com:3000/api</code></p>
  
  <p>On the other hand, Currently i using adonuxt (adonis + nuxt), both listen on same port (3000).</p>
  
  <p>In future, I might separate it to server(3333) and client(3000)</p>
  
  <p>Therefore the api links will be </p>
  
  <pre><code>localhost:3333/api
  
  192.168.8.1:3333/api
  
  example.com:3333/api
  </code></pre>
  
  <p>How do I achieve dynamic api url based on browser and switch port?</p>