Nuxt + Vue + Vuetify: this.$vuetify.breakpoint incorrectly initialized as 'xs'

Question

Using vuetify breakpoints to switch between mobile and desktop layouts for a website

My code is (shrinked(

        <v-layout wrap :column="mobile">
           .
           .
           components and stuff
           .
           .
        <v-layout>

        <script>
           .
           .
           computed: {
             mobile: function () {
               return ['xs', 'sm'].includes(this.$vuetify.breakpoint.name)
             }
           }
           .
           .
        </script>

So Im using a computed function to determine if the client has a small screen

My problem is that the this.$vuetify.breakpoint.name is initially set as xs

My workaround currently is having a loaded method and on the top level doing

<v-app v-if="loaded"
  .
  .
    <v-layout>
      .
    </v-layout>
  .
  .
<v-app>

But now I also have to wrap the entire thing with <NoSsr>

Is there a more correct way to load the components correctly so that they dont jump from mobie version to full size version after the page fully loads?

Answer 1

Generic workaround suggested here is using mounted() hook to set up some form of flag that'll be checked inside computed:

    data: () => ({
      //  ...
      isMounted: false
    }),
    mounted() {
      this.isMounted = true;
    },
    // ...
    computed: {
      mobile: function () {
          return this.isMounted && ['xs', 'sm'].includes(this.$vuetify.breakpoint.name);
      }
    }

Alternatively, you can use any other means in your disposal to set up this flag of mobile detection as early as possible.