How to conditionally render a component with `useDisplay` composable (SSR)?

[igorexa34314]

I'm trying to conditionally render the navigation menu in the 'v-app-bar' based on the viewport size. I am using the mobile property from useDisplay() composable. If it's false, I render the list of links, otherwise the burger icon is rendered. On the local development server everything works fine. But when deploying on netlify, on initial loading, the list of links appears for a moment and then changes to burger button. This behavior is only seen on mobile devices. I have ssrClientHints.viewportSize enabled.

What could this be related to? Maybe I don't quite understand how ClientHints work.

[userquin]

A few questions:

• are you using SSR in local dev environment (SSR should be true)?
• how do you deploy your app to Netlify (using nuxt build or nuxt generate command)?
• what are your routeRules or nitro.routesRules/nitro.prerender options?

[igorexa34314]

• Yes, im using SSR in in local dev environment (SSR is true by default in nuxt.config.ts)
• I deploy using nuxt build command
• I have no routeRules in my nuxt app

[userquin]

@igorexa34314 can you provide the Netlify URL and a link to the repo (if public) ?

[igorexa34314]

1.online-video-cutter.com.mp4

I fixed the code a little bit. Now I found that menu is rendered incorrectly when the viewport width is between my breakpoint and 980px. Although if the width is not in this range, everything works fine.

@userquin This is the website address - https://keksbot.xyz/

[userquin]

On my Chrome (Windows) it is working properly even resizing it to 820px (when enabling mobile view a small slide down transition is there: IIRC, on mobile there is a small bug about slide down in SSR, check vuetifyjs/vuetify#15229)

The SSR state seems to be fine:

HTTP Request Headers:

[igorexa34314]

@userquin Could you try opening the site on mobile phone (Android or iOS)?

[userquin]

On Chrome (Android) the items shown, I Will check it tmr via usb to check what's happening (can be a problem with css, vuetify or both)

[userquin]

@igorexa34314 can you provide the structure you're using? It seems the component to show the items using 1280px but changed to use 820px

If using VToolbar, what's the collapse property you're using?

Maybe it is a problem with mobile-breakpoint prop in the navigation drawer.

[userquin]

Try setting :mobile-breakpoint="820": https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx#L107

EDIT: :mobile-breakpoint="819"

[userquin]

The server sending the toolbar with the hamburger, so it seems a problem with the breakpoints, maybe you can change the defaults using display property in vuetify options (update the entries, the code below from https://vuetifyjs.com/en/features/display-and-platform/#options):

display: {
    mobileBreakpoint: 'sm',
    thresholds: {
      xs: 0,
      sm: 340,
      md: 540,
      lg: 800,
      xl: 1280,
    },
  },

[userquin]

@igorexa34314 mobile breakpoint is 1280px, the default value is lg breakpoint: https://github.com/vuetifyjs/vuetify/blob/f8105c2902bc5ca57c92f8f2898c62a6d5fa001e/packages/vuetify/src/composables/display.ts#L86

[igorexa34314]

@userquin I add breakpoint from app.config.ts using the 'vuetify:before-create' hook. I checked the breakpoints and everything is correct there.

export default defineNuxtPlugin(nuxtApp => {
  const { mobileBreakpoint } = useAppConfig()
  nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
    vuetifyOptions.display = {
      thresholds: {
        ...vuetifyOptions.display?.thresholds,
        lg: mobileBreakpoint
      },
      mobileBreakpoint: 'lg'
    }
  })
})

I also specify mobile breakpoint in useDisplay composable. My navigation bar looks like this:

<template>
  <v-app-bar
    class="app-navbar"
    flat
    color="base"
    :height="isMobile ? navbar.height.mobile : navbar.height.base"
    :elevation="0"
    style="width: 100%; z-index: 1006">
    <div
      class="navbar-container h-100 mx-auto"
      :class="[isMobile ? 'px-4 py-3' : 'pa-5']">
      <v-app-bar-title style="flex: 0 1 auto">
       //...
      </v-app-bar-title>

      <LazyUiBurgerBtn v-if="isMobile" />

      <LazyAppNavMenu v-else />
    </div>
  </v-app-bar>
</template>

<script setup lang="ts">
const { navbar } = useAppConfig().app
const isMobile = useIsMobile()

function useIsMobile = () => {
  const { mobileBreakpoint } = useAppConfig()
  const { mobile } = useVDisplay({ mobileBreakpoint })
  return mobile
}
</script>

I've also tried it without the lazy components as well.

[userquin]

do you have a VNavigationDrawer? It seems the problem is in the layout and the nav drawer, I can see the nav drawer styles in server response

[userquin]

If I don't use mobile view (size > 1280px) the server sending the page without nav drawer and hamburger, if the size is between 820px and 1280px I see the nav drawer styles (div + navigation-drawer classes) and the hamburger button.