Cookies v SSR

src/layouts/ProfileLayout.vue

@@ -3,12 +3,12 @@
     <q-header reveal elevated class="bg-primary text-white">
       <q-toolbar>
         <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
+            flat
+            dense
+            round
+            icon="menu"
+            aria-label="Menu"
+            @click="toggleLeftDrawer"
         />
 
         <q-toolbar-title>
@@ -21,9 +21,9 @@
     </q-header>
 
     <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
+        v-model="leftDrawerOpen"
+        show-if-above
+        bordered
     >
       <q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px"/>
       <q-spinner v-else/>
@@ -34,18 +34,24 @@
     </q-drawer>
 
     <q-page-container>
-      <BreadcrumbsNavigation :items="breadcrumbs" v-if="breadcrumbs !== null"/>
-      <BreadcrumbsSkeleton v-if="breadcrumbs === null" />
+      <BreadcrumbsNavigation :items="breadcrumbs || []"/>
       <div class="q-mx-md q-my-md">
         <router-view/>
       </div>
     </q-page-container>
   </q-layout>
 </template>
-
-<script setup>
-import {onMounted, ref} from 'vue'
+<script>
 import {useUserStore} from "stores/User";
+
+export default {
+  preFetch() {
+    return useUserStore().fetchLoggedUserDetail({refresh: true});
+  }
+}
+</script>
+<script setup>
+import {ref} from 'vue'
 import {storeToRefs} from "pinia";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import {useAppStore} from "stores/App";
@@ -55,7 +61,6 @@ import {successObject} from "src/composables/dialog";
 import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
 import TopMenuButton from "components/navigation/TopMenuButton.vue";
 import {metaData} from "src/composables/meta";
-import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -70,9 +75,6 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 };
 
-onMounted(() => {
-  useUserStore().fetchLoggedUserDetail({refresh: true});
-})
 const {isQueryRunning, user} = storeToRefs(useUserStore());
 
 const logout = () => {