home.vue

<template>
  <div class="bg-gradient-to-r from-theme-1 to-theme-43 min-h-screen">
    <nav-bar :key="$router.currentRoute.value.path"></nav-bar>
    <div class="w-full h-full flex justify-between">
      <router-view v-slot="{ Component }" class="w-full h-full 2xl:px-0">
        <transition mode="out-in" name="scale-slide">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/NavBar.vue";
import { mapGetters } from "vuex";
// eslint-disable-next-line
import { useAuthStore } from "@/store/modules/auth/authStore.js";

const channelsMap = {
  reports: ["report/ACT_GET_REPORT"],
  "upload-import": {
    "label-copy": ["labelUpload/ACT_CHECK_IMPORT_PROGRESS"],
    "track-income": ["trackUpload/ACT_CHECK_IMPORT_PROGRESS"]
  },
  "import-handle": {
    "label-copy": ["labelUpload/ACT_CHECK_IMPORTED_HANDLING_PROGRESS"],
    "track-income": ["trackUpload/ACT_CHECK_IMPORTED_HANDLING_PROGRESS"]
  }
};
export default {
  name: "Home",
  components: { NavBar },
  data() {
    return {
      title: ""
    };
  },
  computed: {
    ...mapGetters({
      privateChannel: "sockets/getChannel"
    })
  },
  watch:{
    "$router.currentRoute":{
      handler(value){
        console.log('Router path', value.value)
      },
      immediate:true,
      deep:true
    },
  },
  async created() {

    await useAuthStore()
      .checkAuth()
      .then((user) => {
        this.$store.dispatch("role/ACT_FETCH_ALL_ROLES").then((roles) => {
          this.$gates.setRoles(roles);
        });

        const channel = window.$echo.private(`user.${user.id}`);
        this.$store.dispatch("sockets/ACT_SET_CHANNEL", channel);
        Object.keys(channelsMap).forEach((event) => {
          this.privateChannel.listen(`.${event}`, (payload) => {
            let events = channelsMap[event];

            if (event === "upload-import" || event === "import-handle") {
              events = channelsMap[event][payload.type];
            }

            events.forEach((action) => {
              this.$store.dispatch(action, payload);
            });
          });
        });
      });

  }
};
</script>
<style scoped>
.scale-slide-enter-active,
.scale-slide-leave-active {
  transition: all 0.5s ease;
}

.scale-slide-enter-from,
.scale-slide-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>

sockets.js

const $echo = window.$echo = new VueEcho({
  broadcaster: "pusher",
  key: PUSHER_KEY,
  cluster: PUSHER_CLUSTER,
  wsHost: "ws-eu.pusher.com",
  host: window.location.host
  .replace(import.meta.env.VITE_DOMAIN, import.meta.env.VITE_API_DOMAIN)
  .replace(import.meta.env.VITE_PORT, ""),
  encrypted: true,
  authEndpoint: `${import.meta.env.VITE_API_URL}broadcasting/auth`,
  enabledTransports: ["ws", "wss", "https"],
  auth: {
    headers: {
      Accept: "application/json",
      authorization: getToken() ? `Bearer ${getToken()}` : null // Enabled - If you are using Bearer for authentication
    }
  }
})