plechelmus Posts - Answer Overflow

plechelmus

Posts Comments

NNuxt

•Created by plechelmus on 10/19/2024 in #❓・help

Unable to preload CSS errors

4 replies

NNuxt

•Created by plechelmus on 10/12/2024 in #❓・help

White flash on page reload

Hi, when reloading a page, I get a white flash. This is happening since a recent update (or change in my code), it was not there before. How can I pinpoint the cause of this? A reproduction in production can be found here: https://hetbrugrestaurant.nl/

12 replies

NNuxt

•Created by plechelmus on 3/13/2024 in #❓・help

runtimeConfig differs on server-render vs client-rendered page

Hi, on intial page load my runtimeConfig uses the default values I set in nuxt.config.ts and does not use any NUXTPUBLIC... overrides from the environment. If I navigate to different pages, this runtimeConfig stays. But when I go to a page that only has a client component, it loads the correct runtimeConfig with the values from my environment. If I navigate to page afterwards it also keeps this runtimeConfig. Reloading the page reverts the runtimeConfig back to the default one. I use the runtimeConfig to point to the resource to load. So you can imagine this is unwanted behaviour since it now shows two different resources based on which page was visited first. What can be the issue of this? I am using the latest version of Nuxt and it is running inside Docker. If I go inside docker and run echo $NUXTPUBLIC... it shows the correct values, but they are not used by the application when first loading the page.

4 replies

NNuxt

•Created by plechelmus on 3/4/2024 in #❓・help

Adding an auth token to $fetch only works after full page refresh, how to fix?

Hi, I am trying to add my auth token to fetch requests if the user is authenticated, and I have created a Nuxt plugin for this that exposes a custom $fetch instance.

import { useUserStore } from "@/store/user.store";

export default defineNuxtPlugin({
    setup() {
        const userStore = useUserStore();
        const token = computed(() => userStore.readToken);

        console.log("TOKEN ", token.value);

        const api = $fetch.create({
            baseURL: useRuntimeConfig().public.apiUrl,
            headers: {
                "Content-Type": "application/json",
                ...(token && token.value ? { Authorization: `${token.value}` } : {}),
            },
        });

        return {
            provide: {
                api,
            },
        };
    },
});

import { useUserStore } from "@/store/user.store";

export default defineNuxtPlugin({
    setup() {
        const userStore = useUserStore();
        const token = computed(() => userStore.readToken);

        console.log("TOKEN ", token.value);

        const api = $fetch.create({
            baseURL: useRuntimeConfig().public.apiUrl,
            headers: {
                "Content-Type": "application/json",
                ...(token && token.value ? { Authorization: `${token.value}` } : {}),
            },
        });

        return {
            provide: {
                api,
            },
        };
    },
});

However, when I run this code it works only after I perform a full page refresh after loggin in. When logging in and navigating to a page that makes a request that requires a token, the token is not included. Only when I fully refresh the page, the token seems to be added. How can I fix this?

2 replies

NNuxt

•Created by plechelmus on 2/21/2024 in #❓・help

Nuxt Build Error: commonjs--resolver missing specifier in date-fns package

Hi, I am trying to use "date-fns" in my project but I get the following error:

Nuxt Build Error: [commonjs--resolver] Missing "./format/index.js" specifier in "date-fns" package

Nuxt Build Error: [commonjs--resolver] Missing "./format/index.js" specifier in "date-fns" package

I use it like:

import { format } from 'date-fns'

import { format } from 'date-fns'

Nuxt is latest version and date-fns also. What could be causing this?

1 replies

Gaming

Programming