12. Dynamic User Profile Page

Published 15 days ago

After a user logs in, it's likely you'll want to render user related data so a user can identify what account they're logged into and make updates as needed. To do this, we'll need to edit our backend session and ensure our VueX store is updated correspondingly.

Avatar SVG Icon
<svg
  fill="currentColor"
  viewBox="0 0 20 20"
  class="w-8 h-8 text-gray-500"
>
  <path
    fill-rule="evenodd"
    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
    clip-rule="evenodd"
  ></path>
</svg>
pages/profile.vue
<template>
  <section class="container mx-auto py-3">
    <div class="ml-4">
      <div class="text-sm leading-5 font-medium text-gray-900">
        Account Email
      </div>
      <div class="text-sm leading-5 text-gray-500">test@example.com</div>
    </div>
  </section>
</template>

<script>
export default {}
</script>

SHARE

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Cheat Sheet

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.