From 797da68979915a2a87482b3d3687cb7e788e27c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Wed, 23 Mar 2022 09:44:36 +0100
Subject: [PATCH] docs(examples): normalize examples using tips (#3852)

---
 examples/config-extends/pages/index.vue       |  7 +++-
 examples/locale/app.vue                       |  9 +++--
 .../module-extend-pages/layouts/default.vue   |  7 +++-
 .../modules/pages/pages/test.vue              |  7 +++-
 examples/nuxt-link/app.vue                    |  8 +++-
 examples/use-async-data/app.vue               | 17 ++++++---
 examples/use-fetch/app.vue                    | 19 ++++++----
 examples/use-meta/app.vue                     | 17 ++++++---
 examples/use-state/app.vue                    |  2 +-
 examples/with-components/app.vue              | 16 +++++---
 .../other-components-folder/with-prefix.vue   |  8 ++--
 examples/with-composables/app.vue             | 35 +++++++++++++----
 examples/with-errors/app.vue                  | 12 ++++--
 examples/with-layouts/layouts/custom.vue      |  2 +-
 examples/with-layouts/nuxt.config.ts          |  7 ++++
 .../pages/{same.vue => custom.vue}            |  5 ++-
 examples/with-layouts/pages/default.vue       |  9 +++++
 .../pages/{manual.vue => dynamic.vue}         |  9 +++--
 examples/with-layouts/pages/index.vue         | 38 +++++++++++--------
 examples/with-middleware/app.vue              | 10 ++++-
 examples/with-pages/app.vue                   | 11 +++++-
 examples/with-plugins/app.vue                 |  9 +++++
 examples/with-reactivity-transform/app.vue    | 15 +++++---
 examples/with-universal-router/app.vue        | 10 ++++-
 examples/with-wasm/app.vue                    | 20 +++++++++-
 25 files changed, 232 insertions(+), 77 deletions(-)
 create mode 100644 examples/with-layouts/nuxt.config.ts
 rename examples/with-layouts/pages/{same.vue => custom.vue} (62%)
 create mode 100644 examples/with-layouts/pages/default.vue
 rename examples/with-layouts/pages/{manual.vue => dynamic.vue} (62%)

diff --git a/examples/config-extends/pages/index.vue b/examples/config-extends/pages/index.vue
index bea4876876..75814a417e 100644
--- a/examples/config-extends/pages/index.vue
+++ b/examples/config-extends/pages/index.vue
@@ -5,7 +5,7 @@ const bar = getBar()
 </script>
 
 <template>
-  <NuxtExampleLayout example="config-extends">
+  <NuxtExampleLayout show-tips example="config-extends">
     theme runtimeConfig
     <pre>{{ JSON.stringify(themeConfig, null, 2) }}</pre>
     <BaseButton>Base Button</BaseButton>
@@ -15,6 +15,11 @@ const bar = getBar()
     {{ foo }} {{ bar }}
     <br>
     {{ $myPlugin() }}
+    <template #tips>
+      <p>
+        This example shows how to use the <code>extends</code> key in <code>nuxt.config.ts</code> to use the <code>base/</code> directory as a base Nuxt application, and use its components, composable or config and override them if necessary.
+      </p>
+    </template>
   </NuxtExampleLayout>
 </template>
 
diff --git a/examples/locale/app.vue b/examples/locale/app.vue
index 286c40061d..6c7d029d00 100644
--- a/examples/locale/app.vue
+++ b/examples/locale/app.vue
@@ -6,7 +6,7 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
 </script>
 
 <template>
-  <NuxtExampleLayout :show-tips="true" example="locale">
+  <NuxtExampleLayout show-tips example="locale">
     <h1 class="text-xl opacity-50">
       Nuxt birthday
     </h1>
@@ -22,9 +22,12 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
     </select>
 
     <template #tips>
-      <div>
+      <p>
+        This example shows how to define a locale composable to handle the application's locale, both server and client-side.
+      </p>
+      <p>
         You can right click to "View Page Source" and see that Nuxt renders the correct date in SSR based on visitor's locale.
-      </div>
+      </p>
     </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/module-extend-pages/layouts/default.vue b/examples/module-extend-pages/layouts/default.vue
index fec82618c2..fc8a25bd56 100644
--- a/examples/module-extend-pages/layouts/default.vue
+++ b/examples/module-extend-pages/layouts/default.vue
@@ -1,5 +1,10 @@
 <template>
-  <NuxtExampleLayout example="module-extend-pages">
+  <NuxtExampleLayout show-tips example="module-extend-pages">
     <slot />
+    <template #tips>
+      <p>
+        This example defines a new <code>test</code> page using <code>extendPages</code> within a module.
+      </p>
+    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/module-extend-pages/modules/pages/pages/test.vue b/examples/module-extend-pages/modules/pages/pages/test.vue
index d1399b0d95..6d83a00dca 100644
--- a/examples/module-extend-pages/modules/pages/pages/test.vue
+++ b/examples/module-extend-pages/modules/pages/pages/test.vue
@@ -1,5 +1,10 @@
 <template>
   <div>
-    Test page added by module
+    <p>
+      Go to <NuxtLink to="/">
+        Homepage
+      </NuxtLink>
+    </p>
+    <p>Test page added by module</p>
   </div>
 </template>
diff --git a/examples/nuxt-link/app.vue b/examples/nuxt-link/app.vue
index 8e2a6cd2ba..79e9a9512e 100644
--- a/examples/nuxt-link/app.vue
+++ b/examples/nuxt-link/app.vue
@@ -1,6 +1,12 @@
 <template>
-  <NuxtExampleLayout :show-tips="true" example="nuxt-link" class="example">
+  <NuxtExampleLayout show-tips example="nuxt-link" class="example">
     <NuxtPage />
+    <template #tips>
+      <p>
+        This example shows different ways to use <code>Nuxtlink</code>.
+        <code>components/myNuxtLink.js</code> defines a custom <code>NuxtLink</code>.
+      </p>
+    </template>
   </NuxtExampleLayout>
 </template>
 
diff --git a/examples/use-async-data/app.vue b/examples/use-async-data/app.vue
index 86020c0f70..fa1a0be39d 100644
--- a/examples/use-async-data/app.vue
+++ b/examples/use-async-data/app.vue
@@ -16,12 +16,17 @@ const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch
     </div>
     <template #tips>
       <div>
-        Nuxt will automatically read files in the
-        <a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
-          <code>~/server/api</code> directory
-        </a>
-        to create API endpoints. Learn more about
-        <a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>
+        <p>
+          This example shows how to use <code>useAsyncData</code> to fetch data from an API endpoint.
+        </p>
+        <p>
+          Nuxt will automatically read files in the
+          <a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
+            <code>~/server/api</code> directory
+          </a>
+          to create API endpoints. Learn more about
+          <a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>
+        </p>
       </div>
     </template>
   </NuxtExampleLayout>
diff --git a/examples/use-fetch/app.vue b/examples/use-fetch/app.vue
index 9375c54b68..a219fd6fbc 100644
--- a/examples/use-fetch/app.vue
+++ b/examples/use-fetch/app.vue
@@ -4,7 +4,7 @@ const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { t
 </script>
 
 <template>
-  <NuxtExampleLayout example="use-fetch" :show-tips="true">
+  <NuxtExampleLayout example="use-fetch" show-tips>
     <div>
       Fetch result:
       <pre class="text-left"><code>{{ data }}</code></pre>
@@ -14,12 +14,17 @@ const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { t
     </div>
     <template #tips>
       <div>
-        Nuxt will automatically read in files in the
-        <a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
-          <code>~/server/api</code> directory
-        </a>
-        to create API endpoints. Learn more about
-        <a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>.
+        <p>
+          This example shows how to use <code>useFetch</code> to fetch data from an API endpoint.
+        </p>
+        <p>
+          Nuxt will automatically read in files in the
+          <a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
+            <code>~/server/api</code> directory
+          </a>
+          to create API endpoints. Learn more about
+          <a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>.
+        </p>
       </div>
     </template>
   </NuxtExampleLayout>
diff --git a/examples/use-meta/app.vue b/examples/use-meta/app.vue
index 010f75dfe2..7590d28092 100644
--- a/examples/use-meta/app.vue
+++ b/examples/use-meta/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtExampleLayout example="use-meta" :show-tips="true">
+  <NuxtExampleLayout example="use-meta" show-tips>
     <div
       class="bg-gray-400/10 border-2 border-dashed border-gray-400/50 rounded-xl py-8 px-2 op-80"
     >
@@ -23,11 +23,16 @@
 
     <template #tips>
       <div class="flex-auto">
-        Learn more about
-        <NuxtLink to="https://v3.nuxtjs.org/docs/usage/meta-tags" target="_blank">
-          Meta tags
-        </NuxtLink>.
-        Open in editor to see the source code 👉
+        <p>
+          This example shows how to use <code>useMeta</code> and Nuxt built-in components to bind meta data to the <code>head</code> of the page.
+        </p>
+        <p>
+          Learn more about
+          <NuxtLink to="https://v3.nuxtjs.org/docs/usage/meta-tags" target="_blank">
+            Meta tags
+          </NuxtLink>.
+          Open in editor to see the source code 👉
+        </p>
       </div>
     </template>
   </NuxtExampleLayout>
diff --git a/examples/use-state/app.vue b/examples/use-state/app.vue
index b0c08e0373..f7f59a4768 100644
--- a/examples/use-state/app.vue
+++ b/examples/use-state/app.vue
@@ -3,7 +3,7 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </script>
 
 <template>
-  <NuxtExampleLayout :show-tips="true" example="use-state">
+  <NuxtExampleLayout show-tips example="use-state">
     <div>Counter: {{ counter }}</div>
     <div>
       <NButton class="font-mono" @click="counter++">
diff --git a/examples/with-components/app.vue b/examples/with-components/app.vue
index a9e9200e7f..74807a6ec4 100644
--- a/examples/with-components/app.vue
+++ b/examples/with-components/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtExampleLayout :show-tips="true" example="with-components">
+  <NuxtExampleLayout show-tips example="with-components">
     <h1 class="text-xl opacity-50">
       Auto Imported Components
     </h1>
@@ -8,15 +8,19 @@
       <HelloWorld class="text-2xl" />
       <Nuxt3 class="text-2xl" />
       <ParentFolderHello class="mt-6" />
+      <NuxtWithPrefix class="mt-6" />
     </div>
 
     <template #tips>
       <div>
-        Components under <code>components/</code> folder are auto imported and can be directly used in your templates.
-        Read more about
-        <NuxtLink to="https://v3.nuxtjs.org/docs/directory-structure/components" target="_blank">
-          the components directory.
-        </NuxtLink>
+        <p>Components under <code>components/</code> directory are auto imported and can be directly used in your templates.</p>
+        <p>Other directories can be configured to support components auto-imports</p>
+        <p>
+          Read more about
+          <NuxtLink to="https://v3.nuxtjs.org/docs/directory-structure/components" target="_blank">
+            the components directory.
+          </NuxtLink>
+        </p>
       </div>
     </template>
   </NuxtExampleLayout>
diff --git a/examples/with-components/other-components-folder/with-prefix.vue b/examples/with-components/other-components-folder/with-prefix.vue
index e2e823e6a8..43daa59fe1 100644
--- a/examples/with-components/other-components-folder/with-prefix.vue
+++ b/examples/with-components/other-components-folder/with-prefix.vue
@@ -1,5 +1,7 @@
 <template>
-  <div>
-    Awesome Component
-  </div>
+  <NCard class="flex flex-col gap-1 p-4">
+    <code>nuxt.config.ts</code> can specify other directories like
+    <code class="op50">`other-components-folder/`</code>
+    to import components from and specify prefixes.
+  </NCard>
 </template>
diff --git a/examples/with-composables/app.vue b/examples/with-composables/app.vue
index 8c8715d8d6..f4dd5c7cbd 100644
--- a/examples/with-composables/app.vue
+++ b/examples/with-composables/app.vue
@@ -1,11 +1,32 @@
 <template>
-  <div>
-    {{ a }}
-    {{ b }}
-    {{ c }}
-    {{ d }}
-    {{ foo }}
-  </div>
+  <NuxtExampleLayout show-tips example="with-composables">
+    <p>
+      Named export <code>useA</code> : {{ a }}
+    </p>
+    <p>
+      Named export <code>useB</code> : {{ b }}
+    </p>
+    <p>
+      Named export <code>useC</code> : {{ c }}
+    </p>
+    <p>
+      Named export <code>useD</code> : {{ d }}
+    </p>
+    <p>
+      Default export <code>useFoo</code> : {{ foo }}
+    </p>
+    <template #tips>
+      <div>
+        <p>
+          This example shows how to use the <code>composables/</code> directory to auto import composables.
+        </p>
+        <p>
+          If a default export is provided, the name of the composable will be mapped to the name of the file.
+          Named exports can be used as-is.
+        </p>
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>
 
 <script setup>
diff --git a/examples/with-errors/app.vue b/examples/with-errors/app.vue
index f6b2aae612..c1b3b30102 100644
--- a/examples/with-errors/app.vue
+++ b/examples/with-errors/app.vue
@@ -15,7 +15,7 @@ function triggerError () {
 </script>
 
 <template>
-  <NuxtExampleLayout example="with-errors">
+  <NuxtExampleLayout show-tips example="with-errors">
     <template #nav>
       <nav class="flex align-center gap-4 p-4">
         <NuxtLink to="/" class="n-link-base">
@@ -39,12 +39,18 @@ function triggerError () {
       </nav>
     </template>
 
-    <FaultyComponent />
-
     <template #footer>
       <div class="text-center p-4 op-50">
         Current route: <code>{{ route.path }}</code>
       </div>
     </template>
+    <template #tips>
+      <div>
+        <p>This example shows how to handle errors in different contexts: pages, plugins, components and middleware.</p>
+        <a href="https://v3.nuxtjs.org/docs/usage/error-handling" target="_blank">
+          Read more about error handling
+        </a>
+      </div>
+    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/with-layouts/layouts/custom.vue b/examples/with-layouts/layouts/custom.vue
index 132f626bfa..3ccb238316 100644
--- a/examples/with-layouts/layouts/custom.vue
+++ b/examples/with-layouts/layouts/custom.vue
@@ -3,7 +3,7 @@
     <strong>Custom layout</strong>
     Header slot:
     <slot name="header">
-      Default slot content
+      Default slot content for <code>Custom</code> layout
     </slot>
     <slot />
   </div>
diff --git a/examples/with-layouts/nuxt.config.ts b/examples/with-layouts/nuxt.config.ts
new file mode 100644
index 0000000000..9850816d15
--- /dev/null
+++ b/examples/with-layouts/nuxt.config.ts
@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
diff --git a/examples/with-layouts/pages/same.vue b/examples/with-layouts/pages/custom.vue
similarity index 62%
rename from examples/with-layouts/pages/same.vue
rename to examples/with-layouts/pages/custom.vue
index a258b5c2dd..b8bb904e73 100644
--- a/examples/with-layouts/pages/same.vue
+++ b/examples/with-layouts/pages/custom.vue
@@ -1,6 +1,7 @@
 <template>
-  <div>
-    Same layout as home
+  <div class="p-4">
+    Custom layout defined with <code>definePageMeta</code>
+    <br>
     <NuxtLink to="/">
       Back to home
     </NuxtLink>
diff --git a/examples/with-layouts/pages/default.vue b/examples/with-layouts/pages/default.vue
new file mode 100644
index 0000000000..175c83f07e
--- /dev/null
+++ b/examples/with-layouts/pages/default.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <p>Content inside <code>default</code> layout</p>
+    <br>
+    <NuxtLink to="/">
+      Back to home
+    </NuxtLink>
+  </div>
+</template>
diff --git a/examples/with-layouts/pages/manual.vue b/examples/with-layouts/pages/dynamic.vue
similarity index 62%
rename from examples/with-layouts/pages/manual.vue
rename to examples/with-layouts/pages/dynamic.vue
index de0776aec6..ba16145855 100644
--- a/examples/with-layouts/pages/manual.vue
+++ b/examples/with-layouts/pages/dynamic.vue
@@ -1,9 +1,11 @@
 <template>
-  <div>
-    Manual control
+  <div class="p-4">
+    Custom layout defined dynamically with the <code>NuxtLayout</code> component
+    <br>
     <NuxtLayout :name="layout">
       Default slot
-      <button @click="layout ? layout = null : layout = 'custom'">
+      <br>
+      <button class="border p-1 rounded" @click="layout ? layout = null : layout = 'custom'">
         Switch layout
       </button>
 
@@ -11,6 +13,7 @@
         Header slot
       </template>
     </NuxtLayout>
+    <br>
     <NuxtLink to="/">
       Back to home
     </NuxtLink>
diff --git a/examples/with-layouts/pages/index.vue b/examples/with-layouts/pages/index.vue
index b34afd50b1..95164ab68f 100644
--- a/examples/with-layouts/pages/index.vue
+++ b/examples/with-layouts/pages/index.vue
@@ -1,18 +1,26 @@
 <template>
-  <div>
-    Welcome to Nuxt Layouts 👋
+  <NuxtExampleLayout show-tips example="with-layouts">
+    <template #nav>
+      <nav class="flex align-center gap-4 p-4">
+        <NuxtLink to="/default">
+          Default layout
+        </NuxtLink>
+        <NuxtLink to="/custom">
+          Custom layout
+        </NuxtLink>
+        <NuxtLink to="/dynamic">
+          Dynamic layout
+        </NuxtLink>
+      </nav>
+    </template>
 
-    <NuxtLink to="/manual">
-      Manual layout
-    </NuxtLink>
-    <NuxtLink to="/same">
-      Same layout
-    </NuxtLink>
-  </div>
+    <template #tips>
+      <div>
+        <p>This example shows how to define default and custom layouts.</p>
+        <a href="https://v3.nuxtjs.org/docs/directory-structure/layouts" target="_blank">
+          Read more about layouts
+        </a>
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>
-
-<script setup>
-definePageMeta({
-  layout: 'custom'
-})
-</script>
diff --git a/examples/with-middleware/app.vue b/examples/with-middleware/app.vue
index 7dd0220f96..8571074416 100644
--- a/examples/with-middleware/app.vue
+++ b/examples/with-middleware/app.vue
@@ -3,7 +3,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <NuxtExampleLayout example="with-middleware">
+  <NuxtExampleLayout show-tips example="with-middleware">
     <NuxtPage />
 
     <template #nav>
@@ -25,5 +25,13 @@ const route = useRoute()
         Current route: <code>{{ route.path }}</code>
       </div>
     </template>
+    <template #tips>
+      <div>
+        <p>This example shows how to add route middleware with the <code>middleware/</code> directory or with a plugin, and how to use them globally or per page.</p>
+        <a href="https://v3.nuxtjs.org/docs/directory-structure/middleware" target="_blank">
+          Read more about middleware
+        </a>
+      </div>
+    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/with-pages/app.vue b/examples/with-pages/app.vue
index bfb4332b4d..59d0c05224 100644
--- a/examples/with-pages/app.vue
+++ b/examples/with-pages/app.vue
@@ -3,7 +3,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <NuxtExampleLayout example="with-pages">
+  <NuxtExampleLayout show-tips example="with-pages">
     <NuxtPage />
 
     <template #nav>
@@ -34,5 +34,14 @@ const route = useRoute()
         Current route: <code>{{ route.path }}</code>
       </div>
     </template>
+
+    <template #tips>
+      <div>
+        <p>This example shows how to use the <code>pages/</code> directory.</p>
+        <a href="https://v3.nuxtjs.org/docs/directory-structure/pages" target="_blank">
+          Read more about pages
+        </a>
+      </div>
+    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/with-plugins/app.vue b/examples/with-plugins/app.vue
index 867f816526..5ac77493ab 100644
--- a/examples/with-plugins/app.vue
+++ b/examples/with-plugins/app.vue
@@ -1,5 +1,14 @@
 <template>
   <NuxtExampleLayout example="with-plugins" show-tips>
     <div>{{ $myPlugin() }}</div>
+
+    <template #tips>
+      <div>
+        <p>This example shows how to use the <code>plugins/</code> directory to auto-register plugins.</p>
+        <a href="https://v3.nuxtjs.org/docs/directory-structure/plugins" target="_blank">
+          Read more about plugins
+        </a>
+      </div>
+    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/with-reactivity-transform/app.vue b/examples/with-reactivity-transform/app.vue
index 7f587f71ff..ef0e09d94c 100644
--- a/examples/with-reactivity-transform/app.vue
+++ b/examples/with-reactivity-transform/app.vue
@@ -12,7 +12,7 @@ function dec () {
 </script>
 
 <template>
-  <NuxtExampleLayout :show-tips="true" example="with-reactivity-transform">
+  <NuxtExampleLayout show-tips example="with-reactivity-transform">
     <div>
       <Label :count="count" />
       <div class="flex gap-1 justify-center">
@@ -27,10 +27,15 @@ function dec () {
 
     <template #tips>
       <div class="flex-auto">
-        Read the documentation about
-        <NLink href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
-          Reactivity Transform.
-        </NLink>
+        <p>
+          This example demonstrates the support of Reactivity transforms in Nuxt 3.
+        </p>
+        <p>
+          Read the documentation about
+          <a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
+            Reactivity Transform.
+          </a>
+        </p>
       </div>
     </template>
   </NuxtExampleLayout>
diff --git a/examples/with-universal-router/app.vue b/examples/with-universal-router/app.vue
index 67291eb98f..661b34f8c9 100644
--- a/examples/with-universal-router/app.vue
+++ b/examples/with-universal-router/app.vue
@@ -4,7 +4,7 @@ const timer = useState('timer', () => 0)
 </script>
 
 <template>
-  <NuxtExampleLayout example="with-universal-router">
+  <NuxtExampleLayout show-tips example="with-universal-router">
     A page...
     <br>
 
@@ -31,5 +31,13 @@ const timer = useState('timer', () => 0)
         Current route: <code>{{ route.path }}</code>
       </div>
     </template>
+
+    <template #tips>
+      <div>
+        <p>
+          This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
+        </p>
+      </div>
+    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/with-wasm/app.vue b/examples/with-wasm/app.vue
index cb5274d455..7320d8c66e 100644
--- a/examples/with-wasm/app.vue
+++ b/examples/with-wasm/app.vue
@@ -8,7 +8,23 @@ const { data } = await useAsyncData('sum',
 </script>
 
 <template>
-  <NuxtExampleLayout example="with-wasm">
-    {{ a }} + {{ b }} = {{ data.sum }}
+  <NuxtExampleLayout show-tips example="with-wasm">
+    <p>
+      <code>a = 100</code>
+    </p>
+    <p>
+      <code>b = 250</code>
+    </p>
+    <p>
+      Computation performed server-side with WASM :
+      <br>
+      <code>{{ a }} + {{ b }} = {{ data.sum }}</code>
+    </p>
+
+    <template #tips>
+      <p>
+        This example demonstrates the server-side support of WebAssembly in Nuxt 3.
+      </p>
+    </template>
   </NuxtExampleLayout>
 </template>