Plesk Question posted in
The official documentation for Plesk Obsidian can be found here.

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

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

plesk current setup

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",
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search