chore: add example with nuxt and pinia colada

Author: posva

examples/nuxt/app.config.ts

@@ -10,6 +10,10 @@ const state = useState('custom-date', () => new Date().toUTCString())
     <NuxtLink to="/">Home</NuxtLink>
     |
     <NuxtLink to="/users/24" v-slot="{ route }">{{ route.href }}</NuxtLink>
+    |
+    <NuxtLink to="/users/colada-24" v-slot="{ route }">{{
+      route.href
+    }}</NuxtLink>
   </nav>
   <NuxtPage />
 </template>

examples/nuxt/app.vue

@@ -1,6 +1,8 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
 
+  modules: ['@pinia/nuxt'],
+
   experimental: {
     typedPages: true,
   },

examples/nuxt/nuxt.config.ts

@@ -7,7 +7,12 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
+    "@pinia/nuxt": "^0.5.4",
     "nuxt": "^3.13.1",
     "unplugin-vue-router": "workspace:*"
+  },
+  "dependencies": {
+    "@pinia/colada": "^0.9.0",
+    "pinia": "^2.2.2"
   }
 }

examples/nuxt/package.json

@@ -24,6 +24,7 @@ export const useUserData = defineBasicLoader(
 defineOptions({
   __loaders: [useUserData],
 })
+
 const { data: user } = useUserData()
 const route = useRoute('users-id')
 </script>

examples/nuxt/pages/users/[id].vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export const useUserData = defineColadaLoader('users-colada-userId', {
+  key: (to) => ['user', to.params.userId],
+  async query(to) {
+    console.log('fetching user...')
+    await delay(1000)
+    const user = {
+      id: to.params.userId,
+      when: Date.now(),
+      n: Math.round(Math.random() * 10000),
+      name: 'John Doe',
+    }
+    console.table(user)
+    return user
+  },
+  // TODO: could display existing data
+  // lazy: (to, from) => !from || to.name !== from.name,
+  lazy: false,
+})
+</script>
+
+<script setup lang="ts">
+defineOptions({
+  __loaders: [useUserData],
+})
+
+const { data: user, error, isLoading, refresh } = useUserData()
+const route = useRoute('users-colada-userId')
+</script>
+
+<template>
+  <div>
+    <h1>User {{ route.params.userId }}</h1>
+    <p v-if="error">An error ocurred: {{ error.message }}</p>
+
+    <!-- display both -->
+    <h3>Display both</h3>
+    <p v-if="isLoading">Loading fresh data...</p>
+    <pre v-if="user">{{ user }}</pre>
+
+    <hr />
+    <h3>Display one of them</h3>
+    <template v-if="user">
+      <p v-if="isLoading">Loading fresh data...</p>
+      <pre v-else>{{ user }}</pre>
+    </template>
+    <template v-else>
+      <p v-if="isLoading">Loading fresh data...</p>
+      <div v-else>
+        <p>Something went wrong...</p>
+        <p v-if="error">{{ error }}</p>
+        <button @click="refresh()">Retry</button>
+      </div>
+    </template>
+  </div>
+</template>

examples/nuxt/pages/users/colada-[userId].vue

@@ -0,0 +1,20 @@
+import {
+  DataLoaderPlugin,
+  type DataLoaderPluginOptions,
+} from 'unplugin-vue-router/data-loaders'
+
+export default defineNuxtPlugin({
+  name: 'data-loaders',
+  dependsOn: ['nuxt:router'],
+  setup(nuxtApp) {
+    nuxtApp.vueApp.use(DataLoaderPlugin, {
+      router: nuxtApp.vueApp.config.globalProperties.$router,
+      isSSR: import.meta.server,
+
+      errors(reason) {
+        console.error('[Data Loaders]', reason)
+        return false
+      },
+    } satisfies DataLoaderPluginOptions)
+  },
+})

examples/nuxt/plugins/data-loaders.ts

@@ -0,0 +1,31 @@
+import { serializeTreeMap, TreeMapNode, reviveTreeMap } from '@pinia/colada'
+
+/**
+ * Handles Firestore Timestamps, GeoPoint, and other types that needs special handling for serialization.
+ */
+export default definePayloadPlugin(() => {
+  definePayloadReducer('PiniaColada_TreeMapNode', (data: unknown) => {
+    if (data instanceof TreeMapNode) {
+      const serialized = serializeTreeMap(data)
+      // console.error('🥣', serialized)
+      return serialized
+    } else if (
+      data &&
+      typeof data === 'object' &&
+      'children' in data &&
+      'value' in data
+    ) {
+      console.log('🥲 not TreeMapNode', data)
+      // console.log([...data])
+      // console.log([...data])
+      // return serialize(data)
+    }
+  })
+  // TODO: pinia colada shouldn't revive itself
+  definePayloadReviver(
+    'PiniaColada_TreeMapNode',
+    (data: ReturnType<typeof serializeTreeMap>) => {
+      return markRaw(reviveTreeMap(data))
+    }
+  )
+})

examples/nuxt/plugins/payload-plugin.ts

@@ -0,0 +1,10 @@
+import { PiniaColada, type PiniaColadaOptions } from '@pinia/colada'
+
+export default defineNuxtPlugin({
+  dependsOn: ['pinia'],
+  setup(nuxtApp) {
+    nuxtApp.vueApp.use(PiniaColada, {
+      // for some reason there is no autocomplete
+    } satisfies PiniaColadaOptions)
+  },
+})