Value in composable is empty

[glacial flare]

I have this line of code that stores the user info

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

The code above is being called on /layouts/dashboard.vue That display's the name of the user

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

I have this component located at /components/dashboard/CurriculumVit.vue but on the page it displays nothing.

<template>
{{ useAuth().user }}
</template>

What is the cause of {{ useAuth().user }} having no value when it was able to display the name of the user ?
Does useState solve this issue?

[rough folio]

Hi @glacial flare. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in your question and the knowledge sources available, it seems that you're encountering an issue with state management in your Nuxt application. Let's address your questions and provide some insights:

1. The cause of {{ useAuth().user }} having no value:
   The issue likely stems from how composables work in Vue and Nuxt. When you call useAuth() in different components, you're creating separate instances of the composable, each with its own state. This means that changes to the user ref in one component won't affect the same ref in another component.

2. Using useState to solve this issue:
   Yes, useState can help solve this issue. According to the Nuxt documentation on State Management (https://nuxt.com/docs/getting-started/state-management), useState is designed to create a reactive and SSR-friendly shared state across components.

Here's how you can modify your code to use useState:

1. In your composable (/composables/auth.ts), replace ref with useState:

const user = useState('user', () => null);

const getCurrentUser = async (): Promise<void> => {
    try {
        const data = await $fetch("/api/auth/user", {
            method: "GET",
            headers: sessionHeader,
        });
        
        if (data.body && "user" in data.body) {
            user.value = data.body.user;
        }
    } catch (err) {
        console.log(err);
    }
};

2. In your components, you can now use useAuth().user and it will reflect the shared state:

<template>
  {{ useAuth().user }}
</template>

This approach ensures that the user state is shared across all components that use the useAuth composable.

It's important to note that, as mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/state-management#best-practices), you should never define state outside of <script setup> or setup() function to avoid state being shared across requests on the server, which can lead to memory leaks.

Also, be aware that the data inside useState will be serialized to JSON, so it's important that it doesn't contain anything that cannot be serialized, such as classes, functions, or symbols.

By using useState, you should be able to solve the issue of the user information not being available in your CurriculumVit.vue component while still being displayed in the DashboardHeader component.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: