docs: update cookbook sidebar

Author: johannschopplich

docs/.vitepress/config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
       '/guide/': sidebarGuide(),
       '/placeholders/': sidebarGuide(),
       '/integrations/': sidebarGuide(),
-      '/cookbook/': sidebarGuide(),
+      '/cookbook/': sidebarCookbook(),
       '/api/': sidebarApi(),
     },
 
@@ -198,7 +198,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
   ]
 }
 
-function sidebarApi(): DefaultTheme.SidebarItem[] {
+function sidebarCookbook(): DefaultTheme.SidebarItem[] {
   return [
     {
       text: 'Overview',
@@ -226,3 +226,18 @@ function sidebarApi(): DefaultTheme.SidebarItem[] {
     },
   ]
 }
+
+function sidebarApi(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Overview',
+      link: '/cookbook/',
+    },
+    {
+      text: 'Articles',
+      items: [
+        { text: 'Aspect Ratio', link: '/cookbook/aspect-ratio' },
+      ],
+    },
+  ]
+}

docs/integrations/nuxt.md

@@ -83,6 +83,7 @@ The `UnLazyImage` component accepts the following props:
 | `blurhash` | String | A BlurHash string representing the blurry placeholder image. |
 | `placeholderSize` | Number | The size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the `blurhash` prop is used. |
 | `placeholderRatio` | Number | Aspect ratio (width / height) of the decoded BlurHash image. Only applies to SSR-decoded placeholder images from a BlurHash string. |
+| `lazyLoad` | Boolean | A flag to indicate whether the image should be lazy-loaded (default) or deferred until this prop is set to `true`. Note: Placeholder images from hashes will still be decoded. |
 | `ssr` | Boolean | Whether the ThumbHash or BlurHash should be decoded on the server. Overrides the global module configuration if set. |
 
 ## Examples

packages/nuxt/playground/app.vue

@@ -10,7 +10,6 @@ const logoUrl = new URL('../../../docs/public/logo.svg', import.meta.url).href
 const shouldLoadImage = ref(false)
 
 function loadImage() {
-  console.log('load image')
   shouldLoadImage.value = true
 }
 </script>