docs(examples): normalize examples using tips (#3852)

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>
 

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>

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>

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>

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>
 

examples/use-async-data/app.vue

@@ -16,12 +16,17 @@ const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch
     </div>
     <template #tips>
       <div>
+        <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>

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>
+        <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>

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">
+        <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>

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++">

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.
+        <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>

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>

examples/with-composables/app.vue

@@ -1,12 +1,33 @@
 <template>
+  <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>
-    {{ a }}
-    {{ b }}
-    {{ c }}
-    {{ d }}
-    {{ foo }}
+        <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>
 const a = useA()

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>

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>

examples/with-layouts/nuxt.config.ts

@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})

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>

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>

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>

examples/with-layouts/pages/index.vue

@@ -1,18 +1,26 @@
 <template>
-  <div>
-    Welcome to Nuxt Layouts 👋
-
-    <NuxtLink to="/manual">
-      Manual layout
+  <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="/same">
-      Same layout
+        <NuxtLink to="/custom">
+          Custom layout
         </NuxtLink>
-  </div>
+        <NuxtLink to="/dynamic">
+          Dynamic layout
+        </NuxtLink>
+      </nav>
     </template>
 
-<script setup>
-definePageMeta({
-  layout: 'custom'
-})
-</script>
+    <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>

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>

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>

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>

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">
+        <p>
+          This example demonstrates the support of Reactivity transforms in Nuxt 3.
+        </p>
+        <p>
           Read the documentation about
-        <NLink href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
+          <a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
             Reactivity Transform.
-        </NLink>
+          </a>
+        </p>
       </div>
     </template>
   </NuxtExampleLayout>

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>

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>