chore: up colada

Author: posva

examples/nuxt/colada.options.ts

@@ -0,0 +1,5 @@
+import type { PiniaColadaOptions } from '@pinia/colada'
+
+export default {
+  // Options here
+} satisfies PiniaColadaOptions

examples/nuxt/nuxt.config.ts

@@ -1,11 +1,14 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
 
-  modules: ['@pinia/nuxt'],
+  modules: [
+    '@pinia/nuxt',
+    '@pinia/colada-nuxt',
+  ],
 
   experimental: {
     typedPages: true,
   },
 
   compatibilityDate: '2024-09-10',
-})
+})

examples/nuxt/package.json

@@ -7,6 +7,7 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
+    "@pinia/colada-nuxt": "0.0.4",
     "@pinia/nuxt": "^0.9.0",
     "nuxt": "^3.15.3",
     "unplugin-vue-router": "workspace:*"

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

@@ -32,6 +32,9 @@ const route = useRoute('users-id')
 <template>
   <div>
     <h1>User {{ route.params.id }}</h1>
-    <pre>{{ user }}</pre>
+    <p>{{ user.name }}</p>
+    <ClientOnly>
+      <pre>{{ user }}</pre>
+    </ClientOnly>
   </div>
 </template>

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

@@ -16,42 +16,45 @@ export const useUserData = defineColadaLoader('users-colada-userId', {
     console.table(user)
     return user
   },
-  // TODO: could display existing data
-  // lazy: (to, from) => !from || to.name !== from.name,
+  // can be flexible
+  // 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 { state: user, isLoading, refresh, refetch } = useUserData()
 const route = useRoute('users-colada-userId')
 </script>
 
 <template>
   <div>
+    <button @click="refresh()">Refresh</button>
+    <button @click="refetch()">Refetch</button>
+    <hr />
+
     <h1>User {{ route.params.userId }}</h1>
-    <p v-if="error">An error ocurred: {{ error.message }}</p>
+    <p v-if="user.error">An error ocurred: {{ user.error.message }}</p>
 
     <!-- display both -->
-    <h3>Display both</h3>
+    <h3>Display all state</h3>
+
     <p v-if="isLoading">Loading fresh data...</p>
-    <pre v-if="user">{{ user }}</pre>
+    <pre v-if="user.data">{{ user.data }}</pre>
 
     <hr />
+
     <h3>Display one of them</h3>
-    <template v-if="user">
+
+    <template v-if="user.status === 'success'">
       <p v-if="isLoading">Loading fresh data...</p>
-      <pre v-else>{{ user }}</pre>
+      <pre v-else>{{ user.data }}</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>
+        <p v-if="user.error">{{ user.error }}</p>
         <button @click="refresh()">Retry</button>
       </div>
     </template>