flaschengeist-frontend/src/plugins/user/components/Widget.vue

<template>
  <q-card style="text-align: center;">
    <q-card-section class="row justify-center content-stretch">
      <div class="col-4">
        <q-avatar style="width: 100%; height: auto;">
          <img :src="avatarLink" />
        </q-avatar>
      </div>
      <div class="col-8">
        <span class="text-h6">{{ name }}</span
        ><br />
        <span>Andere Infos wo ich aber nicht weiß was</span>
      </div>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import MD5 from 'crypto-js/md5';

export default defineComponent({
  name: 'DummyWidget',
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const avatarLink = computed(() => {
      const hash = MD5(store.state.user.currentUser?.mail || '').toString();
      return `https://www.gravatar.com/avatar/${hash}?s=500&d=robohash`;
    });

    const name = ref(store.state.user.currentUser?.display_name);

    return { avatarLink, name };
  }
});
</script>