feat(docs): Mention usage of Pinia in preFetch for SSR too (quasarfra…

…mework#13117)
matej-marjanovic · Apr 7, 2022 · 33a05bf · 33a05bf
1 parent 39d141f
commit 33a05bf
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/docs/src/pages/quasar-cli-vite/prefetch-feature.md b/docs/src/pages/quasar-cli-vite/prefetch-feature.md
@@ -177,26 +177,35 @@ If `redirect(false)` is called (supported only on client-side!), it aborts the c
 The `redirect()` method requires a Vue Router location Object.
 
 ### Using preFetch to Initialize Pinia or Vuex Store(s)
+
 The `preFetch` hook runs only once, when the app boots up, so you can use this opportunity to initialize the Pinia store(s) or the Vuex Store here.
 
 ```js
+// -- Pinia on Non SSR --
+
 // App.vue - handling Pinia stores
 // example with a store named "myStore"
 // placed in /src/stores/myStore.js|ts
 
 import { useMyStore } from 'stores/myStore'
 
-// Non-SSR usage
-
 export default {
   // ...
   preFetch () {
     const myStore = useMyStore()
     // do something with myStore
   }
 }
+```
+
+```js
+// -- Pinia on SSR --
 
-// SSR usage
+// App.vue - handling Pinia stores
+// example with a store named "myStore"
+// placed in /src/stores/myStore.js|ts
+
+import { useMyStore } from 'stores/myStore'
 
 export default {
   // ...

diff --git a/docs/src/pages/quasar-cli-webpack/prefetch-feature.md b/docs/src/pages/quasar-cli-webpack/prefetch-feature.md
@@ -174,10 +174,13 @@ If `redirect(false)` is called (supported only on client-side!), it aborts the c
 
 The `redirect()` method requires a Vue Router location Object.
 
-### Using preFetch to Initialize the Store
+### Using preFetch to Initialize Pinia or Vuex Store(s)
+
 The `preFetch` hook runs only once, when the app boots up, so you can use this opportunity to initialize the Pinia store(s) or the Vuex Store here.
 
 ```js
+// -- Pinia on Non SSR --
+
 // App.vue - handling Pinia stores
 // example with a store named "myStore"
 // placed in /src/stores/myStore.js|ts
@@ -193,6 +196,24 @@ export default {
 }
 ```
 
+```js
+// -- Pinia on SSR --
+
+// App.vue - handling Pinia stores
+// example with a store named "myStore"
+// placed in /src/stores/myStore.js|ts
+
+import { useMyStore } from 'stores/myStore'
+
+export default {
+  // ...
+  preFetch ({ store }) {
+    const myStore = useMyStore(store)
+    // do something with myStore
+  }
+}
+```
+
 ```js
 // App.vue - handling Vuex store
 

diff --git a/ui/dev/src/pages/components/portal-focus.vue b/ui/dev/src/pages/components/portal-focus.vue
@@ -1,19 +1,11 @@
 <template>
-  <div class="q-layout-padding">
-    <!--
-      This is for fast tests.
-      Use this page but don't add it into your commits (leave it outside
-      of your commit).
-
-      For some test that you think it should be persistent,
-      make a new *.vue file here or in another folder under /dev/components.
-    -->
+  <div class="q-pa-md">
     <div class="q-mb-md">Should focus on the dialog input after showing</div>
 
     <q-btn label="DIALOG" color="primary" @click="icon = true" />
 
     <q-btn color="primary" label="MENU" class="q-ml-md">
-      <q-menu no-refocus>
+      <q-menu>
         <q-list dense style="min-width: 100px">
           <q-item clickable v-close-popup @click="icon = true">
             <q-item-section>DIALOG</q-item-section>