Using global variables inside vue components with the help of mixins and default props.

global vars in vue component

// html

window.injectors.baseUrl = '<?= urlHelper('') ?>';

// mixins/injectors.js

const injectorsObj = {};

// eslint-disable-next-line no-undef
Object.keys(window.injectors).forEach((injector) => {
  injectorsObj[injector] = {
    default() {
      // eslint-disable-next-line no-undef
      return window.injectors[injector];
    },
  };
});

export default {
  props: injectorsObj,
};

// componentsHello.vue

<script>
  import injectorsMixin from 'assets/js/mixins/injectors';

  export default {
    mixins: [injectorsMixin],
    data() {
      return {
        msg: 'Hello World!',
      };
    },
  };
</script>