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 :is="item.widget" />
    </div>
  </q-page>
</template>

<script lang="ts">
import { computed, defineComponent, inject } from 'vue';
import { hasPermissions } from '@flaschengeist/api';
import { FG_Plugin } from '@flaschengeist/types';

export default defineComponent({
  name: 'Dashboard',
  setup() {
    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
    const widgets = computed(() => {
      return flaschengeist?.widgets.filter((widget) => hasPermissions(widget.permissions));
    });

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