Nuxt-links working in localhost but not production

Support
1

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
    Linked below

  • Build problems? Link or paste the FULL build log & build settings screenshot
    Build command
    yarn generate

Publish directory
dist

I am dealing with a particular issue where the Nuxt Links in my vuetify navigation drawer seems to work intermittently

<v-navigation-drawer
        color="#fdfcfc"
        width="250"
        mini-variant-width="70px"
        expand-on-hover
        rail
        mini-variant
        app
      >
        <v-list-item>
          <v-btn icon> <v-img src="/puffinS.png"/> </v-btn>
        </v-list-item>
  
        <v-list>
          <NuxtLink v-for="(item, i) in items" :key="i" :to="item.to" exact>
            <v-list-item>
              <v-list-item-action>
                <v-icon color="#000000">{{ item.icon }}</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title><v-btn
                  size="small"
                  class="ma-2"
                  color="#D8FBFD"
                >{{ item.title }}</v-btn></v-list-item-title>
                
              </v-list-item-content>
            </v-list-item>
          </NuxtLink>
        </v-list>
      </v-navigation-drawer>

Page in question linked here where when clicked on the URL would change to correct directory but the page doesn’t change, if I was to reload the page now on the correct directory, it would work, to further add to the symptoms, once it starts working, it keeps working. This same nuxtlinks work straight off the bat when using it on my local host with yarn dev.

At the moment it’s running on netlify using yarn generate command.

I originally posted this on stackexchange but I realised this problem is more so netlify related or atl east from what I can gather, I’ll likely delete the other one when it’s said and done

No errors on my console either when clicking on them

2

Hi would you mind sharing a link to your failed deploy log?

3

Can you share the repository you are deploying from @Sharif4 ?

4

Sorry if what I explained was confusing, there wasn’t one which makes it harder to debug

5

Sure thing

6

Thanks @Sharif4.

I have deployed the site manually to https://vocal-duckanoo-b06a95.netlify.app and it works.

In the end, the only change I made was in the nuxt.config.js where I changed

  ssr: true,

to

  ssr: false,

Reasoning is the target is set to static, which means no SSR.

1 Like
7

At the time I enabled it because I was having trouble uploading it into netlfy at the time and enabling that made it work. I made multitude of changes since then so the actual culprit must have now been resolved for that to be able to be pushed to netlify.

Thanks a lot!!

For others reading this, since the time this was posted, I did some further digging as well and found a left over form implementation which had scripts in it as well, removing all that seems to have solved it even with SSR set to true. With that said, I will disable that as it doesn’t make any sense to have it enabled in my situation.

1 Like
8

New issue, disabling ssr results in the images on the page to not load up when the page first loads

RE:

<v-img 
            :width="800"
            aspect-ratio="16/9"
        class="imgStyles"        
        src="/contact.jpg" 
        lazy-src="/contactLazyLoad.jpg"
        >
        <template v-slot:placeholder>
          <div class="d-flex align-center justify-center fill-height">
            <v-progress-circular
              color="grey-lighten-4"
              indeterminate
            ></v-progress-circular>
          </div>
        </template>

        </v-img>

Reenabling that solves it for the homepage but that same issue exist on my contact page, it seems to load instantly once I refresh the page. It’s currently both being stored in my static directory.

9

Without delving head first into your code, it sounds like you have a mixture of SSR and non-SSR—one thing breaks with it, something else breaks without. You need to decide if you want SSR or not, and build the project accordingly.

10

If I am understanding this, hosting it on netlifly as a static site, it isn’t possible to have any server side rendering? Meaning I must have SSR disabled?

11

SSR is possible with Netlify. Several frameworks including SvelteKit and Nuxt (v2 requires node; v3 can do it on the edge) do utilise Netlify Functions for SSR. However I haven’t used the rendering functionality in Nuxt.

Check out

Though I do note your project uses Nuxt v2.

12

I will look into the nuxt-img property this weekend and see if that solves it and also look into how my recent nuxt install is the older version of nuxt and not the newest one

13

I upgraded to nuxt 3 and Vuetify 3, everything is working straight off the bat, thanks for the all the help!

14

Thanks for coming back and letting us know your solution! I appreciate this. (:

1 Like