NUXT_FRONTEND/components/User/Profile/Info.vue

<template>
  <section class="detail section">
    <div class="adaptive_flex basic_content">
      <div class="column">
          <h1>Личный кабинет</h1>
          <p>Email: {{ user ? user.email : "email не привязан"}}</p>
          <p>Имя: {{ user ? user.first_name : ""}}</p>
          <!--p>Телефон: {{ phone ? phone : "телефон не привязан" }}</p-->
          <button class="simple-button" @click="logout">Выйти</button>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    props: {
      user: {
        type: Object,
      },
    },
    head() {
      return {
        title: "Личный кабинет",
      };
    },
    methods: {
      logout () {
        this.$auth.logout()
          .then((res) => {
            if (res.data.success == true) {
              this.$router.push({path: '/'})
            }
          })
      }
    },
    mounted() {
      if (!this.$store.state.auth.user) {
        this.$route.push('user/authorization')
      }
    }
  };
</script>

<style lang="less">
  .user {
    &__wrapper {
      padding-bottom: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      max-height: 750px;
      background: white;
      height: 100%;
      max-width: 400px;
      margin: 0 auto;
      p {
        display: inline-flex;
        margin-bottom: 15px;
      }
    }
  }
</style>