flaschengeist-frontend/src/plugins/user/pages/User.vue

<template>
  <div>
    <q-page
      padding
      class="fit row justify-center content-center items-center"
      v-if="checkMain"
    >
      <q-card
        class="col-4"
        height=""
      >
        <q-card-section>
          Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
          E-Mail: {{ userObj.mail }}<br />
          Roles:
          <ul
            v-for="role in userObj.roles"
            v-bind:key="role"
          >
            <li>{{ role }}</li>
          </ul>
          <br />
          Token expires: {{ sessionObj.expires }}
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { UserStateInterface } from '../store/user';
import { mainLink } from '../plugin';

export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    const userObj = computed(
      () => <UserStateInterface>root.$store.getters['user/user']
    );
    const sessionObj = computed(
      () => <UserStateInterface>root.$store.getters['user/session']
    );
    const checkMain = computed(() => {
      return mainLink.name == root.$route.name;
    });
    return { userObj, sessionObj, checkMain };
  }
});
</script>