Tackleberry
Tackleberry
PostsComments
NNuxt
Created by Dante on 11/1/2024 in #❓・help
[Solved] Local Fonts Not Working
You changed the src dir in your config, so public is no longer at the root dir 😄
20 replies
NNuxt
Created by Dante on 11/1/2024 in #❓・help
[Solved] Local Fonts Not Working
I don't know what starter you used or what you changed, but nuxt 3 has the root level as srcDir, so the public folder would be in the root level as well
20 replies
NNuxt
Created by Dante on 11/1/2024 in #❓・help
[Solved] Local Fonts Not Working
It's all answered in the link to the doc section i posted
20 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
The same approach could be used in your onRequest handler: 
onRequest({ options }) {
            // trying to call useIdentityStore from within an onRequest function, which might be executed at any random time. nuxt context might not be available at that point
            const identityStore = useIdentityStore();
            const sessionIdKey = 'X-SessionId';
            options.headers = new Headers(options.headers);
            const sessionId = options.headers.get(sessionIdKey);
            if (!identityStore.session || sessionId) return;
            options.headers.set(sessionIdKey, identityStore.session.sessionID || '');
        },
onRequest({ options }) {
            // trying to call useIdentityStore from within an onRequest function, which might be executed at any random time. nuxt context might not be available at that point
            const identityStore = useIdentityStore();
            const sessionIdKey = 'X-SessionId';
            options.headers = new Headers(options.headers);
            const sessionId = options.headers.get(sessionIdKey);
            if (!identityStore.session || sessionId) return;
            options.headers.set(sessionIdKey, identityStore.session.sessionID || '');
        },
instead try this: 
// define identityStore in page / component / composable setup function, where nuxt context is available
const identityStore = useIdentityStore();

// ...
onRequest({ options }) {
            at any random time. nuxt context might not be available at that point
            const sessionIdKey = 'X-SessionId';
            options.headers = new Headers(options.headers);
            const sessionId = options.headers.get(sessionIdKey);
            if (!identityStore.session || sessionId) return;
            options.headers.set(sessionIdKey, identityStore.session.sessionID || '');
        },
// define identityStore in page / component / composable setup function, where nuxt context is available
const identityStore = useIdentityStore();

// ...
onRequest({ options }) {
            at any random time. nuxt context might not be available at that point
            const sessionIdKey = 'X-SessionId';
            options.headers = new Headers(options.headers);
            const sessionId = options.headers.get(sessionIdKey);
            if (!identityStore.session || sessionId) return;
            options.headers.set(sessionIdKey, identityStore.session.sessionID || '');
        },
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
No problem! I'm referring to the approach outlined in this and this message. The idea is to not call the nuxt-context-dependent functions within the function handler itself, but rather define them in the setup part of your composable, where you are certain to have the necessary context. Then you can call them within your handlers. Let's compare yours and mine. Yours: 
export const useStatusStore = defineStore('statuses', () => {
    const url = '/api/statuses';

    const fetchAll = () => {
        // Trying to call useNuxtApp from within an event handler. It might not have nuxt context available because it is executed at any random time.
        const { $api } = useNuxtApp();
        return $api(url);
    };

    return {
        fetchAll
    }
});
export const useStatusStore = defineStore('statuses', () => {
    const url = '/api/statuses';

    const fetchAll = () => {
        // Trying to call useNuxtApp from within an event handler. It might not have nuxt context available because it is executed at any random time.
        const { $api } = useNuxtApp();
        return $api(url);
    };

    return {
        fetchAll
    }
});
to mine: 
export const useStatusStore = defineStore('statuses', () => {
    const url = '/api/statuses';
    // call useNuxtApp in the store setup function, which is executed during component and page setups, so nuxt context should be available
    // + added below: const { $api } = useNuxtApp(); // expose in store setup
    const { $api } = useNuxtApp(); // expose in store setup

    const fetchAll = () => {
        // - removed: const { $api } = useNuxtApp();
        return $api(url);
    };

    return {
        fetchAll
    }
});
export const useStatusStore = defineStore('statuses', () => {
    const url = '/api/statuses';
    // call useNuxtApp in the store setup function, which is executed during component and page setups, so nuxt context should be available
    // + added below: const { $api } = useNuxtApp(); // expose in store setup
    const { $api } = useNuxtApp(); // expose in store setup

    const fetchAll = () => {
        // - removed: const { $api } = useNuxtApp();
        return $api(url);
    };

    return {
        fetchAll
    }
});
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
still, what about pulling stuff up a layer? Do you know what I mean?
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
this is in the browser, I assume. What about the server log? And the approach of pulling stuff up into a layer where context should definitely be available?
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
maybe try pulling it out of the onRequest? Also, does it not supply any lines or stack traces where it complains about?
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
if that's no good, try setting + exposing api earlier and not in the fetchAll? Because you definitely should have a nuxt instance available in the setup of your store. Like this: 
export const useStatusStore = defineStore('statuses', () => {
    const url = '/api/statuses';
    const { $api } = useNuxtApp(); // expose in store setup

    const fetchAll = () => {
        return $api(url);
    };

    return {
        fetchAll
    }
});
export const useStatusStore = defineStore('statuses', () => {
    const url = '/api/statuses';
    const { $api } = useNuxtApp(); // expose in store setup

    const fetchAll = () => {
        return $api(url);
    };

    return {
        fetchAll
    }
});
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
have you tried supplying the nuxt app through your handler? If it works on refresh but not on page load I assume useNuxtApp() does not work on initial load because it's out of context (I assume because of some async shenanigans). So maybe try supplying the nuxt app via the handler function as it might have a nuxt app according to the type. So something like 
await useAsyncData(async (nuxtApp) => {
  return await statusStore.fetchAll(nuxtApp);
});
await useAsyncData(async (nuxtApp) => {
  return await statusStore.fetchAll(nuxtApp);
});
and then check if nuxtApp is defined in your fetchAll and only try useNuxtApp if it isn't
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
no problem, don't have too much time so it's a few shots in the dark 😄
42 replies
NNuxt
Created by Dante on 11/1/2024 in #❓・help
[Solved] Local Fonts Not Working
I notice you have a srcDir: "src/" set in your nuxt.config. If I interpret the docs correctly, the public directory is relative to the src directory by default. However, in your repo, the public folder is at top level and not inside the src directory. Maybe try moving the public folder inside the src directory.
20 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
why are you creating a function where you return the fetchAll call? And where is it called? Could you verify if this call triggers the warning? Because if this fetchAll function is called somewhere out of context, it might be the issue
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
ah, and another one: - Do you await somewhere in your plugin / composable before calling anything nuxt-related? This could lead to context-loss
42 replies
NNuxt
Created by Kernel Panic on 11/5/2024 in #❓・help
How are custom fetches used on a large scale project?
It's tricky without seeing any of your code, especially the way the plugin is implemented. A few things I could think of: - Why does the composable require access to the Nuxt instance in the first place? - Why does the composable need a separate plugin? Why not have the fetch in the composable? - Can you verify when / where the functionality is called? Is it actually within the lifecycle of the page / component - is the functionality used somewhere outside of your components (e.g. server side routes)?
42 replies
NNuxt
Created by Tackleberry on 8/13/2024 in #❓・help
e2e testing api routes: "setup" is not exported by "node_modules/unenv/runtime/mock/proxy.mjs"
No one here who uses e2e testing with nuxt? 😦
2 replies