Expose Auth User Object to a Vue component in a Multi-App-Page

home-global.php

<?php require 'header.php' ?>

<?php if (isLogged()) : ?>
<script>
  // this is one way, the global var way
  // the function getAuthUser() returns an Object of the user
  // oui json encode it which will give something like : { name: "", ... }
  // and this when rendered here is a string, but in a browser it's a js object so no need for quotes or it will be a string in JS too
  window.user = <?= json_encode(getAuthUser()) ?>;
</script>
<?php endif ?>

<script src="my-vue-components.js"></script>

<?php require 'footer.php' ?>

home-inject.php

<?php
function getRandomComponent($user) {
?>
  <script>
    new Vue({
      el: '#widget',
      data() {
        return {
          auth: <?= $user ?>
        }
      }
    });
  </script>
<?php
}

require 'header.php';

if (isLogged()) {
  getRandomComponent(getAuthUser());
}
?>

<script src="my-vue-components.js"></script>

<?php require 'footer.php' ?>

home-mixin.php

<?php require 'header.php' ?>

<?php if (isLogged()) : ?>
<script>
  const VueAuthMixin = {
    methods: {
      getAuthUser() {
        return <?= json_encode(getAuthUser()) ?>;
      }
    }
  };
</script>
<?php else : ?>
<script>
  const VueAuthMixin = {}
</script>
<?php endif ?>

<!-- here, in this JS, we asume you could include the previous mixin anywhere  -->
<script src="my-vue-components.js"></script>

<?php require 'footer.php' ?>