flaschengeist-frontend/src/pages/Dashboard.vue

<template>
  <q-page
    padding
    style="grid-auto-rows: 1fr;"
    class="fit row justify-around items-start q-col-gutter-sm"
  >
    <div
      v-for="(item, index) in widgets"
      :key="index"
      class="col-4 full-height col-sm-6 col-xs-12"
    >
      <component v-bind:is="item" />
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api';
import { hasPermissions } from 'src/components/permission';
import { AsyncComponentPromise } from 'vue/types/options';

export default defineComponent({
  name: 'Dashboard',
  setup(_, { root }) {
    const widgets = ref<Array<AsyncComponentPromise>>([]);

    onMounted(() => {
      root.$flaschengeistPlugins.widgets.forEach((widget) => {
        if (hasPermissions(widget.permissions, root.$store))
          widgets.value.push(widget.widget);
      });
    });

    return {
      widgets,
    };
  },
});
</script>