[Vuejs]-Vue.js based common front-end script on CDN with multiple backends

by

0👍

✅

Sounds like you need something similar to .env files/variables but on the client side.

Each of your backends could generate a simple JS file of common format, for example:

<script>
    window.__env = {
        apiBackend: 'http://some.site/api/1/'
    }
</script>

and then include it before your components from CDN

<head>
    <!-- libs -->
    <script src="env.js"></script>
    <script src="https://xyz.s3-aws-domain.com/vue-components.js"></script>
</head>

and then in your components use this globally available object to create axios instance

// api.js
export const API = axios.create({
    baseURL: __env.apiBackend
})

// in some component
import API from 'api.js'

// in vue component method/action/vuex etc
API
    .post('getSomeData', {id: 123})
    .then(response => {
        // do something with data from http://some.site/api/1/getSomeData
    })

Leave a comment