Fixing Nuxt client-side rendered virtual DOM error in vuetify

Nuxt-DOM-error-with-vuetify.md

1. Define isHydrated in data property and set default value false.

data: {
  return {
    isHydrated: false,
  };
},

2. Define breakpoint computed property and set some default value of $vuetify breakpoints.

computed: {
  breakpoint() {
    return this.isHydrated
      ? this.$vuetify.breakpoint
      : { smAndUp: true, xsOnly: false };
  },
},

3. Set isHydrated value true in mounted hook.

mounted() {
  this.isHydrated = true;
},

4. Use breakpoint computed property instead of $vuetify.breakpoint in template.

<template>
  <v-app id="app">
    <v-navigation-drawer
      v-if="breakpoint.xsOnly"
      fixed
      app
    >
      <v-btn>My Profile</v-btn>
    </v-navigation-drawer>
  </v-app>
</template>