Show User Data and Logout

In this lesson, we will show the user's name and email and will build the Log out button.

Composable Method

First, in the auth Composable, let's add a reactive user object.

resources/composables/auth.js:

import { ref, reactive } from 'vue'
import { useRouter } from "vue-router";
 
const user = reactive({ 
    name: '',
    email: '',
}) 
// ...

Then, after successful login, we need to assign the values to that object.

resources/composables/auth.js:

import { ref, reactive, inject } from 'vue'
import { useRouter } from 'vue-router';
 
const user = reactive({
    name: '',
    email: '',
})
 
export default function useAuth() {
    // ...
 
    const loginUser = (response) => {
        user.name = response.data.name 
        user.email = response.data.email 
 
        localStorage.setItem('loggedIn', JSON.stringify(true))
        router.push({ name: 'posts.index' })
    }
    // ...
    return { loginForm, validationErrors, processing, submitLogin } 
    return { loginForm, validationErrors, processing, submitLogin, user } 
}

Now, let's build a method to use...