ssr hydration mismatch

src/components/Template/Header/MainHeader.vue

@@ -141,12 +141,14 @@
 </template>
 
 <script>
+import { User } from 'src/models/User.js'
 import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'templateHeader',
   data () {
     return {
+      user: new User(),
       topMenuItems: [
         // {
         //   title: 'معرفی پروژه',
@@ -191,18 +193,21 @@ export default {
     isHomePage () {
       return this.$route.name && this.$route.name === 'Public.Home'
     },
-    user () {
-      return this.$store.getters['Auth/user']
-    },
     ...mapGetters('AppLayout', [
       'breadcrumbs',
       'windowSize'
     ])
   },
+  mounted () {
+    this.loadAuthData()
+  },
   methods: {
     ...mapMutations('AppLayout', [
       'updateLayoutLeftDrawerVisible'
     ]),
+    loadAuthData () {
+      this.user = this.$store.getters['Auth/user']
+    },
     goToHome () {
       this.$router.push({ name: 'Public.Home' })
     },

src/css/Theme/theme.scss

@@ -20,11 +20,8 @@
 }
 
 .main-layout {
-  .q-layout {
-    background: #F9F9F9
-  }
   & > .q-layout {
-    background: #F5F5F5;
+    background: #FFF;
   }
 }
 

src/pages/Public/ShowClassroomInfo.vue

@@ -6,14 +6,14 @@
 </template>
 
 <script>
+import { mixinPageOptions, mixinPrefetchServerData, mixinSEO } from 'src/mixin/Mixins.js'
+
 export default {
-  name: 'ShowClassroomInfo',
+  name: 'Public.ShowClassroomInfo',
+  mixins: [mixinPrefetchServerData, mixinPageOptions, mixinSEO],
   data () {
     return {
-      pageConfig: {},
-      pageBuilderEditable: false,
-      pageBuilderLoading: false,
-      currenSections: [
+      sections: [
         {
           data: {
             rows: [