Fix Pinia/useLocalStorage in SSR mode.

nuxt.config.ts

@@ -8,10 +8,8 @@ export default defineNuxtConfig({
     "@vueuse/nuxt",
     "nuxt-vuefire"
   ],
-  // NOTE: We have to disable SSR until Pinia has better
-  //       support for our usage. (See stores/*.ts.)
-  // HACK: We have to disable SSR until Pinia has better
-  //       support for our usage. See stores/AppSettings.ts.
+  // NOTE: This allows us to deploy to some free
+  //       hosting services.
   ssr: false,
   css: [
     'primevue/resources/themes/saga-blue/theme.css',

stores/Team.ts

@@ -3,45 +3,17 @@ import { nanoid } from "nanoid";
 
 import type { ID } from '~~/types';
 
-// NOTE: This Pinia store requires `ssr: false` in `nuxt.config.*` because the server
-//       will try to serialize our computed state properties to JSON, and that will fail
-//       because functions can't be serialized.
-//
-//       See: [The Pinia guide](https://pinia.vuejs.org/core-concepts/)
-//            https://github.com/vuejs/pinia/issues/829 (look for "Advanced SSR")
-//            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
-//            https://github.com/nuxt/nuxt/issues/20889
-
 export const useTeamStore = defineStore('TeamStore', {
   state: () => {
-    const _id = useLocalStorage<ID>('TeamStore:id', nanoid());
-    const _isLocked = useLocalStorage<boolean>('TeamStore:isLocked', false);
-
-    // NOTE: We provide setters so we can persist to storage.
-    //       Source: https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
-
-    const id = computed<ID>({
-      get: () => _id.value,
-      set: (v) => _id.value = v
-    });
-
-    const isLocked = computed<boolean>({
-      get: () => _isLocked.value,
-      set: (v) => _isLocked.value = v
-    });
-
-    // function $reset() {
-    //   //TODO
-    // }
-
     return {
-      id,
-
-      isLocked,
-
-      //$reset,
+      id: useLocalStorage<ID>('TeamStore:id', nanoid()),
+      isLocked: useLocalStorage<boolean>('TeamStore:isLocked', false),
     };
   },
+  hydrate(state, initialState) {
+    state.id = useLocalStorage<ID>('TeamStore:id', initialState.id).value,
+    state.isLocked = useLocalStorage<boolean>('TeamStore:isLocked', initialState.isLocked).value
+  },
 });
 
 if (import.meta.hot) {