Can't store user data in VUE

[robgonzalez]

Hello you all,

I have a question, i’m new to this tool and i’m already implemented the login and signup views on VUE 3.

What i’m trying to do is to handle and store data such as user name (user.name)

Here is my example code:

<template>
    <div>
        directly from auth0 = {{ user.name }}
    </div>
    <div>
        <button @click="printUser">Console</button>
    </div>
</template>

<script setup>
import { useAuth0 } from '@auth0/auth0-vue';

const { user } = useAuth0();


const printUser = () => {
    console.log(user.name)
}

</script>

<style>

</style>

I’m getting the user.name right, but when i try to print it on console i can’t seem to get the data defined.

Any tip o posible solution?

[tyf]

Hi there @robgonzalez welcome to the community!

I’m working off of our Vue sample app here for reference - The following works:

<template>
  <div class="container">
    <div class="row align-items-center profile-header">
      <div class="col-md-2 mb-3">
        <img
          :src="user?.picture"
          alt="User's profile picture"
          class="rounded-circle img-fluid profile-picture"
        />
      </div>
      <div class="col-md text-center text-md-left">
        <h2>{{ user?.name }}</h2>
        <p class="lead text-muted">{{ user?.email }}</p>
        <button @click="printUser">Console</button>
      </div>
    </div>

    <div class="row">
      <highlightjs language="json" :code="JSON.stringify(user, null, 2)" />
    </div>
  </div>
</template>

<script lang="ts">
import { useAuth0 } from '@auth0/auth0-vue';

export default {
  name: "profile-view",
  setup() {
    const auth0 = useAuth0();
    return {
      user: auth0.user,
    }
    
  },
  methods: {
    printUser() {
      if(this.user && this.user.name) {
        console.log(this.user.name);
      } else {
        console.log("no user data available")
      }
    }

  }
};
</script>

Hope this helps!