Tom Posts - Answer Overflow

Tom

•Created by Tom on 7/18/2024 in #❓・help

useState working in SSR but undefined in browser

Hey everyone, I'm unsure how to tackle this, I have a composable:

const useUserState = () => useState('user');

export const useUser = () => {
    const jwt = useCookie('jwt');
    const user = useUserState();

    const login = async (body: any) => {
        const data = await usePayloadFetch('users/login', { method: 'POST', body });
        jwt.value = data.token;
        navigateTo('/');
    };

    const logout = async () => {
        jwt.value = undefined;
        user.value = undefined;
    };

    const getUser = async () => {
        if (user.value) return user;

        const data = await usePayloadFetch('users/me');
        user.value = data;

        return user;
    };

    return { token: jwt, getUser, login, logout };
};

const useUserState = () => useState('user');

export const useUser = () => {
    const jwt = useCookie('jwt');
    const user = useUserState();

    const login = async (body: any) => {
        const data = await usePayloadFetch('users/login', { method: 'POST', body });
        jwt.value = data.token;
        navigateTo('/');
    };

    const logout = async () => {
        jwt.value = undefined;
        user.value = undefined;
    };

    const getUser = async () => {
        if (user.value) return user;

        const data = await usePayloadFetch('users/me');
        user.value = data;

        return user;
    };

    return { token: jwt, getUser, login, logout };
};

In the front end if I getUser in the front end and console.log(user.value) it's undefined, but if I return user.value inside getUser() everyone works as expected. I'm misunderstanding how state is used here. Can anyone explain where I'm going wrong?

1 replies

NNuxt

•Created by Tom on 6/12/2024 in #❓・help

@nuxt/scripts Save user selection?

Hello, I've created a custom cookie consent banner using @nuxt/scripts, I am using https://scripts.nuxt.com/docs/api/use-consent-script-trigger. If a user refreshes the consent state is lost. Is there a way to keep their consent settings?

1 replies

NNuxt

•Created by Tom on 6/10/2024 in #❓・help

Preventing Refetching in Component

Hey everyone, I'm using useAsyncData with a key so useAsyncData('config'), what I thought the key did is if config already exists in the payload it will load from there rather than refetching. That way you can safely use useAsyncData inside components. This is super useful as you can just drop in components and the data will come with it. If you can have multiple components pulling from the data source, rather than making multiple requests it will load from the payload. I'm finding that I have a component that loads config data for the menu, each time the menu is unmounted and mounted it refetches data from the database endpoint. Have I misunderstood what they key does in useAsyncData and is there a way to make it behave like I described?

6 replies

NNuxt

•Created by Tom on 6/7/2024 in #❓・help

A/B Testing Middleware

Hello everyone, I'm wanting to do some A/B Testing on Vercel. The guide is for NextJS (https://vercel.com/blog/ab-testing-with-nextjs-and-vercel#experimenting-at-the-edge). So I'm looking to convert this into Nuxt, the only thing I can't seem to find any information on is how to set a cookie in a Nuxt Middleware. I've attempted to use useCookie().

6 replies

Gaming

Programming