Send Data From app.vue to Page in Nuxt.js 3 - vue.js

Question

I'm making a registration page, and if the user is logged in I need to send the user object from the app.vue file to every page in the pages/ directory. Here's the app.vue:
<script setup>
import { ref } from 'vue';
const userId = useCookie('user');
const userObj = await $fetch('/api/user/getLoggedInUser', {
method: 'post',
body: {
id: userId.value
}
});
const user = ref(userObj);
</script>
<template>
<div>
<Header />
<NuxtLayout>
<NuxtPage :user="user.value" />
</NuxtLayout>
</div>
</template>
How would I get the user in /pages/index.vue, or any of the files in that directory?

Answer 1

When I need to handle user authentication I usually like to use #vueuse useLocalStorage, which is basically a wrapper for reactive local storage, so the user stays logged in between sessions. You need to:
Authenticate the user
Save the user object/response in the localStorage (your userObj)
Access it wherever you need
Example:
// useUser composable
export const useUser = () => {
const user = useLocalStorage("user", null); // by default is not logged in, so null or some other value you can check
const login = async() => {
const userObj = await ...;
user.value = userObj; // here you set the user in the storage
}
return {
user,
login
}
}
Then where you need to auth the user:
const { login } = useUser();
await login();
And where you need to access the user object:
const { user } = useUser();
const someData = user.someValue;
The user object will persist until you manually empty the localStorage, or until you create a logout function which clears the storage key and logs out the user.