Nuxt3 pages are duplicated twice at the end of the scroll on production

Question

When running the project on local whether in dev or prod mode using whether npm run dev or npm run build followed by npm run preview respectively it works just fine on my local machine,

When deploying the app in a Plesk server, by taking the .output content and setting the following setting

I get the home page duplicated (I see my home page and when I scroll way down I refound the page again like it rerendered and it conflicts with the topper part), same thing for the other pages, sometimes they throw 404 error because of the 404 page

this is the app.vue page

<script setup>
  useHead({
    script: [
      {
        src: 'https://www.googletagmanager.com/gtag/js?id=blablabla',
        async: true,
      },
      {
        innerHTML: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'blablabla');
        `,
      },
    ],
    link: [
      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'manifest', href: '/site.webmanifest' },
      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#14696d' },
    ],
  });
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

this is the nuxt config used

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-aos',
    '@nuxtjs/i18n',
  ],
  css: ['~/styles/globals.css'],
  plugins: [
    { src: '~/plugins/Vue3Lottie.client.js', mode: 'client' },
    { src: '~/plugins/Intercom.client.js', mode: 'client' },
    { src: '~/plugins/Flickity.js', ssr: false },
    { src: '~/plugins/FloatingVue.js', ssr: false },
  ],
  i18n: {
    vueI18n: './i18n/i18n.config.js',
  },
  devServer: {
    host: 'myhost',
    port: 443,
    https: {
      key: './cert/myhost-key.pem',
      cert: './cert/myhost.pem'
    }
  },
})

for the versions used

    "nuxt": "^3.13.0",
    "vue": "latest",

Michael Gaud · Accepted Answer · 2024-10-20 04:34:31Z

0

I ran into a similar issue. Mine was being caused by my dashboard layout that i was using incorrectly. I'm sure you've tried this but if you are using a custom layout file try removing it or placing a global variable that triggers if the page has already been rendered.

Hope this helps

answered Oct 20, 2024 at 4:34

Michael Gaud

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

ALLAOUA Okba Over a year ago

Still same issue

ALLAOUA Okba · Accepted Answer · 2024-11-13 22:44:22Z

0

The solution to this problem was to whether disable the SSR mode key in the nuxt config by making it false or by rechecking the behavior of rendering some of the components that they're CSR without wrapping them in a ClientOnly component tag.

answered Nov 13, 2024 at 22:44

ALLAOUA Okba

1382 silver badges11 bronze badges

Collectives™ on Stack Overflow

Nuxt3 pages are duplicated twice at the end of the scroll on production

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related