Add remaining nuxt slides

Author: ChristianKrebel

presentations/new-in-vue/pages/nuxt.md

@@ -156,7 +156,7 @@ transition: fade-out
 # Fetch
 
 - `$fetch()` ist isometrisches `fetch()`
-- für einmalige Requests wie z.B. beim Klick auf einem Button
+- für einmalige Requests wie z.B. beim Klick auf einen Button
 - für Requests auf Serverseite
 - kein Auto-caching oder Request-deduplication von Nuxt
   - mehrere gleiche & gleichzeitige Requests würden alle ausgeführt werden
@@ -171,38 +171,41 @@ return await $fetch("https://api.example.invalid/users/12", {
 
 ---
 transition: fade-out
-layout: two-column
 ---
 
 # Fetch
 
 <div class="grid grid-cols-2 gap-sm">
 
-- `useAsyncData()` wie früher `asyncData`
-- Wenn Daten nicht unbedingt von einer API kommen
-- Meist in Pages (oder auch Components & Composables)
-- Für komplexes Fetchen
-- mit Auto-caching und Request-deduplication von Nuxt
+- `useAsyncData()`-Composable wie früher `asyncData`
+- Nur im Vue-Context
+- Für komplexes Fetchen (oder andere async. Logik)
+- Mit Auto-caching und Request-deduplication von Nuxt
   - mehrere gleiche & gleichzeitige Requests würden nur einmal ausgeführt werden
 
 ```vue
 <script setup>
-const { data: products, pending, error } = await useAsyncData(
-  'products', // Unique key
-  async () => {
-    // Custom fetch logic
-    const response = await $fetch('/api/products')
-    return response.items.filter(item => item.inStock)
-  },
-  {
-    // Optional: refresh on route changes
-    watch: [/* reactive dependencies */],
-    // Optional: server-side only
-    server: true,
-    // Optional: lazy loading
-    lazy: false
-  }
-)
+const { data, status, error, refresh, clear } = 
+  await useAsyncData(
+    'user', // Optional: Unique key
+    async () => {
+      // Custom fetch logic
+      const [posts, followers, activity] = 
+        await Promise.all([
+          $fetch(`/api/users/${userId.value}/posts`),
+          $fetch(`/api/users/${userId.value}/followers`),
+          $fetch(`/api/users/${userId.value}/activity`)
+        ])
+      return { posts, followers, activity }
+    },
+    {
+      // Optional: refresh on route changes
+      watch: [/* reactive dependencies */],
+      // Optional: lazy loading
+      lazy: false
+      // ...
+    }
+  )
 </script>
 ```
 
@@ -212,6 +215,68 @@ const { data: products, pending, error } = await useAsyncData(
 transition: fade-out
 ---
 
+# Fetch
+
+<div class="grid grid-cols-3 gap-sm">
+
+<div class="col-span-1">
+
+- `useFetch()`-Composable kombiniert `useAsyncData()` & `$fetch()`
+- Nur im Vue-Context
+- Nur für HTTP-Requests
+- Simpler & automatisch reaktiv
+
+</div>
+<div class="col-span-2">
+
+```vue
+<script setup>
+const page = ref(1)
+const pageSize = ref(10)
+
+const { data: photos, pending, error, refresh } = 
+  await useFetch("/api/photos", {
+    // Optional: set a key for caching
+    key: `photos-${toValue(page)}-${toValue(pageSize)}`,
+    // Optional: set query params
+    params: { page, pageSize },
+    // Optional: transform the response
+    transform: (response) => response.photos,
+    // ...
+  })
+
+function nextPage() {
+  page.value++
+}
+</script>
+```
+
+</div>
+</div>
+
+---
+transition: fade-out
+layout: items
+---
+
+# Fetch
+
+Wann was nutzen?
+
+```mermaid
+flowchart LR
+    A[Bin ich auf dem Server?] -->|Ja| B["$fetch()"]
+    A -->|Nein| C[Mache ich einmalige Anfragen, die **kein** Auto-Caching und Request-Deduplication benötigen?]
+    C -->|Ja| B
+    C -->|Nein| E["Brauche ich flexiblen low-level Zugriff auf komplexe asynchrone Operationen (mehr als nur HTTP)?"]
+    E -->|Ja| F["useAsyncData()"]
+    E -->|Nein| G["useFetch()"]
+```
+
+---
+transition: fade-out
+---
+
 # Exception Handling
 
 - `error.vue`-Page bei fatalem Error
@@ -263,7 +328,29 @@ transition: fade-out
 
 # Exception Handling
 
+- Vues `onErrorCaptured()`-Composable zum programmatischen Catchen von Errors
+
+```vue
+<script setup>
+onErrorCaptured((error, instance, info) => {
+  // Global error logging that catches everything
+  console.error(`Global error: ${error.message}`)
+  console.log(`Error occurred in component:`, instance)
+  console.log(`Error info:`, info)
+
+  // Let the error continue to propagate to UI boundaries
+  return true
+})
+</script>
+```
+---
+transition: fade-out
+---
+
+# Exception Handling
+
 - `<NuxtErrorBoundary>` zum Catchen von Errors im UI
+- Nutzt `onErrorCaptured()`-Composable intern
 
 ```vue
 <template>
@@ -281,36 +368,26 @@ transition: fade-out
 
 ---
 transition: fade-out
+layout: items
 ---
 
 # Exception Handling
 
-- Vues `onErrorCaptured()`-Composable zum programmatischen Catchen von Errors
-
-```vue
-<script setup>
-onErrorCaptured((error, instance, info) => {
-  // Global error logging that catches everything
-  console.error(`Global error: ${error.message}`)
-  console.log(`Error occurred in component:`, instance)
-  console.log(`Error info:`, info)
+Wann was verwenden?
 
-  // Let the error continue to propagate to UI boundaries
-  return true
-})
-</script>
+```mermaid
+flowchart LR
+    A["Ist mein Error fatal (Server-Error oder createError() mit fatal: true)?"]
+    B["*error.vue*-Page"]
+    C["Möchte ich globales, komplexes, programmatisches oder UI-unabhängiges Error-Handling?"]
+    D["onErrorCaptured()"]
+    E["NuxtErrorBoundary-Component"]
+
+    A -->|Ja| B
+    A -->|Nein| C
+    C -->|Ja| D
+    C -->|Nein| E
 ```
----
-transition: fade-out
----
-
-# Exception Handling
-
-Wann was verwenden?
-- `<NuxtErrorBoundary>`: UI-spezifisches Error-Handling
-- `onErrorCaptured()`: globales oder komplexes Error-Handling, UI-unabhängig, kann Propagation stoppen
-- `error.vue`-Page, wenn fataler Error auftritt
-  - Server-Error oder `createError("...", { fatal: true })`
 
 ---
 transition: fade-out