Nuxt•9mo ago

Nuxt loading content from other pages

I have this issue only on production currently. When i'm redirecting the user with

this.$router.push({
   path: '/game',
});

this.$router.push({
   path: '/game',
});

to another page, suddenly some content from other pages gets loaded into the current layout. In my screenshot you can see the /game page... The Headline "Bereit zum Spielen?" is from the / page and on the left "Trete einem Raum bei" is from /lobby The content with the red border is the actually content which should only be shown on this current page When im refreshing the page. Everything disappears and it works. I dont know why this happens and why this happens only on prod. I build the prod site with nuxt build and run it with node .output/.... I have another nuxt website with a quite similar setup - everything works there.

1 Reply

Mittelblut9OP•9mo ago

Its kind of a big file tbf... cutted some code out which isnt relevant like methods and data stuff

// /lobby
<template>
    <div v-if="isInRoom">
        Lobby stuff
    </div>
    <div v-else>
        Here is the "Trete einem Raum bei"
    </div>
    <FooterComponent />
</template>

<script lang="ts">
export default {
    name: 'LobbyPage',
    setup(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            userStore: useUserStore(),
            toast: useToast(),
        };
    },
    data(): any {
        return {
            ...
        };
    },
    beforeMount(): void {
This here is the part where everyone gets redirected to /game        
globalThis.socket.on(CLIENT_EVENTS.startGameBroadcast, () => {
            this.$router.push({
                path: '/game',
            });
        });
    },
};
</script>

// /lobby
<template>
    <div v-if="isInRoom">
        Lobby stuff
    </div>
    <div v-else>
        Here is the "Trete einem Raum bei"
    </div>
    <FooterComponent />
</template>

<script lang="ts">
export default {
    name: 'LobbyPage',
    setup(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            userStore: useUserStore(),
            toast: useToast(),
        };
    },
    data(): any {
        return {
            ...
        };
    },
    beforeMount(): void {
This here is the part where everyone gets redirected to /game        
globalThis.socket.on(CLIENT_EVENTS.startGameBroadcast, () => {
            this.$router.push({
                path: '/game',
            });
        });
    },
};
</script>

// /game
<template>
    <div
        v-show="loaded"
        class="text-center top-50 start-50 translate-middle"
        :class="{ 'position-absolute': loaded }"
    >
        game stuff
    </div>
</template>

<script lang="ts">

export default {
    name: 'GamePage',
    setup(): any {
        return {
            userStore: useUserStore(),
        };
    },
    data(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            ...
        };
    },
    beforeMount(): void {
....
    },
...
};
</script>

// /game
<template>
    <div
        v-show="loaded"
        class="text-center top-50 start-50 translate-middle"
        :class="{ 'position-absolute': loaded }"
    >
        game stuff
    </div>
</template>

<script lang="ts">

export default {
    name: 'GamePage',
    setup(): any {
        return {
            userStore: useUserStore(),
        };
    },
    data(): any {
        definePageMeta({
            layout: 'default',
        });
        return {
            ...
        };
    },
    beforeMount(): void {
....
    },
...
};
</script>

Hope this is helping if not - then yikes :LULE: what da hell is definePageMeta doing in the data method.. Nope lemme try oh my god it works (i hope :lol: ) ... thank you!!! you dont know how many hrs i wasted on this bug :OMEGALULiguess: check check :okok:

Gaming

Programming

Nuxt loading content from other pages