Nuxt 3 with Vuetify 3 and SSR reactivity

Tomasz Lempart 0
Viewed 59

I am trying to use Nuxt 3 together with Vuetify 3 in SSR mode. I face a problem using display's breakpoints. What is more, this functionality works with Nuxt 2 and Vuetify 2.

The code below shows only div element with red background instead of green, although the screen size is large. The reason is that the initial DOM rendering, which happens on the server side, assumes that the screen's size is small. The hydration on the client side somehow doesn't take into account, that the real size is large, although you can see in the browser's web inspector a log information result green.

<template>
  <div>
    <div :class="divClass">Reactivity</div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useDisplay } from 'vuetify'

const counter = ref(1)
const { lgAndUp } = useDisplay()

const divClass = computed(() => {
  const result = lgAndUp.value ? 'green' : 'red'
  console.log('result', result)

  return result
})
</script>

<style>
  .green {
    background-color: green;
  }
  .red {
    background-color: red;
  }
</style>

This seems like a bug, but maybe I've done some silly mistake here. Could you look at this and verify? Thanks in advance :)

The project sources can be found on GitHub

vuetifyjs3 nuxtjs3
1 Answers

You could use ref property and watch the lgAndUp value to update it :

<template>
  <div>
    <div :class="divClass">Reactivity</div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useDisplay } from 'vuetify';
const { lgAndUp } = useDisplay();
const divClass = ref('');

watch(lgAndUp, (val) => {
  console.log(val);
  divClass.value = val ? 'green' : 'red';
},{immediate:true});
</script>

<style>
.green {
  background-color: green;
}
.red {
  background-color: red;
}
</style>

DEMO

Boussadjra Brahim0
Related