Courses

Vue.js 3 + Laravel 11 + Vite: SPA CRUD

Show User Data and Logout

Summary of this lesson:
- Displaying authenticated user information
- Implementing logout functionality
- Managing user state in composables
- Handling authentication session

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

user details in the navigation


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...

The full lesson is only for Premium Members.
Want to access all 27 lessons of this course? (115 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord