chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

<template>
   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
   <div v-else id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>

      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom1">
            <ul class="list-unstyled">
               <li v-if="counter.notifications > 0">
                  <i18n-t keypath="counter.unread_notifications" tag="span" :class="counterClass" :plural="counter.notifications">
                     <template v-slot:n><span>{{ counter.notifications }}</span></template>
                  </i18n-t>
               </li>
               <li v-if="counter.accompanyingCourses > 0">
                  <i18n-t keypath="counter.assignated_courses" tag="span" :class="counterClass" :plural="counter.accompanyingCourses">
                     <template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
                  </i18n-t>
               </li>
               <li v-if="counter.works > 0">
                  <i18n-t keypath="counter.assignated_actions" tag="span" :class="counterClass" :plural="counter.works">
                     <template v-slot:n><span>{{ counter.works }}</span></template>
                  </i18n-t>
               </li>
               <li v-if="counter.evaluations > 0">
                  <i18n-t keypath="counter.assignated_evaluations" tag="span" :class="counterClass" :plural="counter.evaluations">
                     <template v-slot:n><span>{{ counter.evaluations }}</span></template>
                  </i18n-t>
               </li>
               <li v-if="counter.tasksAlert > 0">
                  <i18n-t keypath="counter.alert_tasks" tag="span" :class="counterClass" :plural="counter.tasksAlert">
                     <template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
                  </i18n-t>
               </li>
               <li v-if="counter.tasksWarning > 0">
                  <i18n-t keypath="counter.warning_tasks" tag="span" :class="counterClass" :plural="counter.tasksWarning">
                     <template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
                  </i18n-t>
               </li>
            </ul>
         </div>
      </div>


      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom2">
            News
             <MyWidget :chart-data="chartData" />
         </div>
      </div>
      <div class="mbloc col col-sm-6 col-lg-4">
         <div class="custom3">
            Mon dashboard personnalisé
         </div>
      </div>

   </div>
</template>

<script>
import { mapGetters } from "vuex";
import Masonry from 'masonry-layout/masonry';

export default {
   name: "MyCustoms",
   data() {
      return {
         counterClass: {
            counter: true   //hack to pass class 'counter' in i18n-t
         },
      }
   },
   computed: {
      ...mapGetters(['counter']),
      noResults() {
         return false
      },
   },
   mounted() {
      const elem = document.querySelector('#dashboards');
      const masonry = new Masonry(elem, {});
   }
}
</script>

<style lang="scss" scoped>
div.custom4,
div.custom3,
div.custom2 {
   font-style: italic;
   color: var(--bs-chill-gray);
}
span.counter {
   & > span {
      background-color: unset;
   }
}
</style>