docs(examples): add examples to docs (#3966)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

docs/components/app/AppLayout.vue

@@ -2,7 +2,7 @@
   <div class="relative w-full">
     <AppHeader :links="headerLinks" />
 
-    <div class="lg:flex" :class="{ 'd-container': layout.aside }">
+    <div class="lg:flex" :class="containerClass">
       <slot v-if="['xs', 'sm', 'md'].includes($mq) || layout.aside" name="aside">
         <AppAside :links="headerLinks" :class="layout.asideClass" />
       </slot>
@@ -33,6 +33,11 @@ export default defineComponent({
   computed: {
     layout () {
       return this.$docus.layout.value
+    },
+    containerClass () {
+      if (this.layout.aside && this.layout.fluid) { return 'd-container-fluid' }
+      if (this.layout.aside) { return 'd-container' }
+      return ''
     }
   }
 })

docs/components/atoms/Sandbox.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl rounded-md sandbox mt-4">
+    <TabsHeader
+      v-if="!src"
+      ref="tabs"
+      :active-tab-index="activeTabIndex"
+      :tabs="providersTabs"
+      @update="updateTab"
+    >
+      <div slot="footer" class="absolute top-1/2 transform -translate-y-1/2 right-0 px-2">
+        <Link class="flex items-center text-gray-500 dark:text-gray-400" :to="sandBoxUrl" blank>
+          <IconExternalLink class="h-5 w-5" />
+        </Link>
+      </div>
+    </TabsHeader>
+
+    <iframe
+      v-if="url"
+      :src="url"
+      title="Sandbox editor"
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+      class="w-full h-full min-h-[700px] overflow-hidden bg-gray-100 dark:bg-gray-800"
+    />
+    <span v-else class="text-white flex-1">Loading Sandbox...</span>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  onMounted,
+  computed,
+  ref,
+  useContext
+} from '@nuxtjs/composition-api'
+export default defineComponent({
+  props: {
+    src: {
+      type: String
+    },
+    repo: {
+      type: String
+    },
+    branch: {
+      type: String
+    },
+    dir: {
+      type: String
+    },
+    file: {
+      type: String,
+      default: 'app.vue'
+    }
+  },
+  setup (props) {
+    const { $colorMode } = useContext()
+    const providers = {
+      CodeSandBox: () =>
+        `https://codesandbox.io/embed/github/${props.repo}/tree/${props.branch}/${props.dir}?hidenavigation=1&theme=${$colorMode.value}`,
+      StackBlitz: () =>
+        `https://stackblitz.com/github/${props.repo}/tree/${props.branch}/${props.dir}?embed=1&file=${props.file}&theme=${$colorMode.value}`
+    }
+    const providersTabs = Object.keys(providers).map(p => ({ label: p }))
+    const activeTabIndex = ref(-1)
+    const tabs = ref()
+    const url = ref('')
+    const provider = ref('')
+    function updateTab (i) {
+      activeTabIndex.value = i
+      changeProvider(providersTabs[i].label)
+    }
+    onMounted(() => {
+      // TODO: if Safari, use CodeSandBox by default: const defaultSandbox = ...
+      provider.value =
+        window.localStorage.getItem('docus_sandbox') || 'CodeSandBox'
+      url.value = props.src || providers[provider.value]()
+      // Set active tab
+      activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
+      setTimeout(() => tabs.value.updateTabs(activeTabIndex.value), 100)
+    })
+    const changeProvider = (value) => {
+      provider.value = value
+      url.value = props.src || providers[provider.value]()
+      localStorage.setItem('docus_sandbox', value)
+    }
+    const sandBoxUrl = computed(() => url.value?.replace('?embed=1&', '?').replace('/embed/', '/s/'))
+    return {
+      tabs,
+      provider,
+      url,
+      sandBoxUrl,
+      changeProvider,
+      updateTab,
+      activeTabIndex,
+      providersTabs
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.sandbox,
+.sandbox iframe {
+  @apply w-full rounded-md rounded-tl-none rounded-tr-none overflow-hidden h-64;
+  height: 700px;
+}
+</style>

docs/components/templates/Example.vue

@@ -0,0 +1,45 @@
+<template>
+  <AppPage>
+    <PageContent :page="page" />
+    <template #prev-next>
+      <PagePrevNext :prev="prev" :next="next" />
+    </template>
+  </AppPage>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  useContext,
+  useFetch
+} from '@nuxtjs/composition-api'
+export default defineComponent({
+  props: {
+    page: {
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const { $docus } = useContext()
+    const prev = ref(null)
+    const next = ref(null)
+    useFetch(async () => {
+      const [prevLink, nextLink] = await $docus.getPreviousAndNextLink(
+        props.page
+      )
+      prev.value = prevLink
+      next.value = nextLink
+    })
+    return {
+      prev,
+      next
+    }
+  },
+  templateOptions: {
+    aside: true,
+    fluid: false
+  }
+})
+</script>

docs/content/4.examples/0.essentials/hello-world.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Hello world
+
+A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
+
+::alert{type=info icon=👉}
+Read more about [installation](/getting-started/installation).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/essentials/hello-world" file="app.vue"}

docs/content/4.examples/1.app/error-handling.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Error Handling
+
+This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
+
+::alert{type=info icon=👉}
+Learn more about [error handling](/docs/usage/error-handling).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/errors" file="app.vue"}

docs/content/4.examples/1.app/plugins.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Plugins
+
+This example shows how to use the `plugins/` directory to auto-register plugins.
+
+::alert{type=info icon=👉}
+Learn more about [plugins](/docs/directory-structure/plugins).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/plugins" file="app.vue"}

docs/content/4.examples/2.auto-imports/components.md

@@ -0,0 +1,14 @@
+---
+template: Example
+---
+
+# Components
+
+Components in the `components/` directory are auto imported and can be directly used in your templates.
+You can configure other directories to support components auto-imports.
+
+::alert{type=info icon=👉}
+Read more about [the components directory](/docs/directory-structure/components).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/auto-imports/components" file="app.vue"}

docs/content/4.examples/2.auto-imports/composables.md

@@ -0,0 +1,14 @@
+---
+template: Example
+---
+
+# Composables
+
+This example shows how to use the `composables/` directory to auto import composables.
+If the component file provides a default export, the name of the composable will be mapped to the name of the file. Named exports can be used as-is.
+
+::alert{type=info icon=👉}
+Read more about [the composables directory](/docs/directory-structure/composables).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/auto-imports/composables" file="app.vue"}

docs/content/4.examples/3.composables/use-async-data.md

@@ -0,0 +1,17 @@
+---
+template: Example
+---
+
+# useAsyncData
+
+This example shows how to use `useAsyncData` to fetch data from an API endpoint.
+
+::alert{type=info icon=💡}
+Nuxt will automatically read files in the ~/server/api directory to create API endpoints.
+::
+
+::alert{type=info icon=👉}
+Learn more about [data fetching](/docs/usage/data-fetching).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-async-data" file="app.vue"}

docs/content/4.examples/3.composables/use-cookie.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# useCookie
+
+This example shows how to use the `useCookie` API to persist small amounts of data that both client-side and server-side can use.
+
+::alert{type=info icon=👉}
+Learn more about [useCookie](/docs/usage/cookies).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-cookie" file="app.vue"}

docs/content/4.examples/3.composables/use-fetch.md

@@ -0,0 +1,17 @@
+---
+template: Example
+---
+
+# useFetch
+
+This example shows how to use `useFetch` to fetch data from an API endpoint.
+
+::alert{type=info icon=💡}
+Nuxt will automatically read files in the ~/server/api directory to create API endpoints.
+::
+
+::alert{type=info icon=👉}
+Learn more about [data fetching](/docs/usage/data-fetching).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-fetch" file="app.vue"}

docs/content/4.examples/3.composables/use-meta.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# useMeta
+
+This example shows how to use `useMeta` and Nuxt built-in components to bind meta data to the head of the page.
+
+::alert{type=info icon=👉}
+Learn more about [meta tags](/docs/usage/meta-tags).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-meta" file="app.vue"}

docs/content/4.examples/3.composables/use-state.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# useState
+
+`useState` is an SSR-friendly ref replacement. Its value will be preserved after server-side rendering and shared across all components using a unique key.
+
+::alert{type=info icon=👉}
+Learn more about [useState](/docs/usage/state).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-state" file="app.vue"}

docs/content/4.examples/4.routing/layouts.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Layouts
+
+This example shows how to define default and custom layouts.
+
+::alert{type=info icon=👉}
+Learn more about [layouts](/docs/directory-structure/layouts).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/layouts" file="pages/index.vue"}

docs/content/4.examples/4.routing/middleware.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Middleware
+
+This example shows how to add route middleware with the middleware/ directory or with a plugin, and how to use them globally or per page.
+
+::alert{type=info icon=👉}
+Learn more about [middleware](/docs/directory-structure/middleware).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/middleware" file="app.vue"}

docs/content/4.examples/4.routing/nuxt-link.md

@@ -0,0 +1,17 @@
+---
+template: Example
+---
+
+# NuxtLink
+
+This example shows different ways to use Nuxtlink.
+
+::alert{type=info icon=💡}
+`components/myNuxtLink.js` defines a custom NuxtLink.
+::
+
+::alert{type=info icon=👉}
+Learn more about [NuxtLink](/docs/usage/nuxt-link).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/nuxt-link" file="app.vue"}

docs/content/4.examples/4.routing/pages.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Pages
+
+This example shows how to use the `pages/` directory to create application routes.
+
+::alert{type=info icon=👉}
+Learn more about [pages](/docs/directory-structure/pages).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/pages" file="app.vue"}

docs/content/4.examples/4.routing/universal-router.md

@@ -0,0 +1,9 @@
+---
+template: Example
+---
+
+# Universal Router
+
+This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/universal-router" file="app.vue"}

docs/content/4.examples/5.advanced/config-extends.md

@@ -0,0 +1,9 @@
+---
+template: Example
+---
+
+# Config extends
+
+This example shows how to use the `extends` key in nuxt.config.ts to use the base/ directory as a base Nuxt application, and use its components, composables or config and override them if necessary.
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/config-extends" file="nuxt.config.ts"}

docs/content/4.examples/5.advanced/module-extend-pages.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Module Extend pages
+
+This example defines a new `test` page using `extendPages` within a module.
+
+::alert{type=info icon=👉}
+Learn more about [modules creation](/docs/advanced/modules).
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/module-extend-pages" file="pages/index.vue"}

docs/content/4.examples/5.advanced/test.md

@@ -0,0 +1,7 @@
+---
+template: Example
+---
+
+# Test
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/test" file="app.vue"}

docs/content/4.examples/6.experimental/reactivity-transform.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Reactivity Transform
+
+This example demonstrates the support of Reactivity transform in Nuxt 3.
+
+::alert{type=info icon=👉}
+Learn more about [Reactivity transform](https://vuejs.org/guide/extras/reactivity-transform.html) on the Vue docs.
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/experimental/reactivity-transform" file="app.vue"}

docs/content/4.examples/6.experimental/wasm.md

@@ -0,0 +1,9 @@
+---
+template: Example
+---
+
+# Wasm
+
+This example demonstrates the server-side support of WebAssembly in Nuxt 3.
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/experimental/wasm" file="app.vue"}

docs/content/4.examples/7.other/locale.md

@@ -0,0 +1,13 @@
+---
+template: Example
+---
+
+# Locale
+
+This example shows how to define a locale composable to handle the application's locale, both server and client-side.
+
+::alert{type=info icon=💡}
+You can right click to "View Page Source" and see that Nuxt renders the correct date in SSR based on visitor's locale.
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/other/locale" file="app.vue"}

docs/content/4.examples/index.md

@@ -0,0 +1,9 @@
+---
+title: Examples
+layout.aside: true
+layout.fluid: true
+navigation:
+  exclusive: true
+  collapse: true
+  redirect: /examples/essentials/hello-world
+---

docs/content/_collections/header.md

@@ -9,6 +9,9 @@ links:
   -
     title: 'Docs'
     to: '/docs/usage/data-fetching'
+  -
+    title: 'Examples'
+    to: '/examples/essentials/hello-world'
   -
     title: 'Community'
     to: '/community/getting-help'

examples/README.md

@@ -10,10 +10,10 @@
 | `use-fetch` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-fetch) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-fetch?file=app.vue&terminal=dev) |
 | `use-meta` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-meta) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-meta?file=app.vue&terminal=dev) |
 | `use-state` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-state) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?file=app.vue&terminal=dev) |
-| `with-components` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-components) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-components?file=app.vue&terminal=dev) |
+| `components` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/components) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/components?file=app.vue&terminal=dev) |
-| `with-composables` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-composables) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-composables?file=app.vue&terminal=dev) |
+| `composables` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/composables) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/composables?file=app.vue&terminal=dev) |
-| `with-layouts` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-layouts) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-layouts?file=app.vue&terminal=dev) |
+| `layouts` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/layouts) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/layouts?file=app.vue&terminal=dev) |
-| `with-pages` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-pages) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-pages?file=app.vue&terminal=dev) |
+| `pages` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/pages) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/pages?file=app.vue&terminal=dev) |
-| `with-plugins` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-plugins) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-plugins?file=app.vue&terminal=dev) |
+| `plugins` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/plugins) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/plugins?file=app.vue&terminal=dev) |
-| `with-universal-router` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-universal-router) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-universal-router?file=app.vue&terminal=dev) |
+| `universal-router` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/universal-router) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/universal-router?file=app.vue&terminal=dev) |
-| `with-wasm` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-wasm) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-wasm?file=app.vue&terminal=dev) |
+| `wasm` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/wasm) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/wasm?file=app.vue&terminal=dev) |

examples/advanced/config-extends/pages/index.vue

@@ -5,7 +5,7 @@ const bar = getBar()
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="config-extends">
+  <NuxtExampleLayout example="config-extends">
     theme runtimeConfig
     <pre>{{ JSON.stringify(themeConfig, null, 2) }}</pre>
     <BaseButton>Base Button</BaseButton>
@@ -15,11 +15,6 @@ 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/advanced/module-extend-pages/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtExampleLayout example="module-extend-pages">
+    <slot />
+  </NuxtExampleLayout>
+</template>

examples/advanced/test/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-with-test",
+  "name": "example-test",
   "private": true,
   "scripts": {
     "build": "nuxi build",

examples/app/error-handling/app.vue

@@ -15,7 +15,7 @@ function triggerError () {
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="with-errors">
+  <NuxtExampleLayout example="errors">
     <template #nav>
       <nav class="flex align-center gap-4 p-4">
         <NuxtLink to="/" class="n-link-base">
@@ -44,13 +44,5 @@ function triggerError () {
         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/app/error-handling/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-with-plugins",
+  "name": "example-error-handling",
   "private": true,
   "scripts": {
     "build": "nuxi build",

examples/app/plugins/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtExampleLayout example="plugins">
+    <div>{{ $myPlugin() }}</div>
+  </NuxtExampleLayout>
+</template>

examples/app/plugins/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "example-with-wasm",
+  "name": "example-plugins",
   "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
   "devDependencies": {
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
     "nuxt3": "latest"
-  },
-  "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "start": "nuxi preview"
   }
 }

examples/auto-imports/components/app.vue

@@ -0,0 +1,14 @@
+<template>
+  <NuxtExampleLayout example="components">
+    <h1 class="text-xl opacity-50">
+      Auto Imported Components
+    </h1>
+    <div>
+      <!-- Auto Imported Components -->
+      <HelloWorld class="text-2xl" />
+      <Nuxt3 class="text-2xl" />
+      <ParentFolderHello class="mt-6" />
+      <NuxtWithPrefix class="mt-6" />
+    </div>
+  </NuxtExampleLayout>
+</template>

examples/auto-imports/components/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-with-pages",
+  "name": "example-components",
   "private": true,
   "scripts": {
     "build": "nuxi build",

examples/auto-imports/composables/app.vue

@@ -0,0 +1,17 @@
+<template>
+  <NuxtExampleLayout example="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>
+  </NuxtExampleLayout>
+</template>
+
+<script setup>
+const a = useA()
+const b = useB()
+const c = useC()
+const d = useD()
+const foo = useFoo()
+</script>

examples/auto-imports/composables/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-with-errors",
+  "name": "example-composables",
   "private": true,
   "scripts": {
     "build": "nuxi build",

examples/composables/use-async-data/app.vue

@@ -13,7 +13,7 @@ const refreshAll = async () => {
 </script>
 
 <template>
-  <NuxtExampleLayout example="use-async-data" show-tips>
+  <NuxtExampleLayout example="use-async-data">
     <div>
       <div class="flex justify-center gap-2">
         <NButton @click="showMountain = !showMountain">
@@ -31,20 +31,5 @@ const refreshAll = async () => {
         <MountainExample v-if="showMountain" />
       </div>
     </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>
 </template>

examples/composables/use-cookie/app.vue

@@ -15,7 +15,7 @@ const logout = () => {
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips="true" class="h-50" example="use-cookie">
+  <NuxtExampleLayout class="h-50" example="use-cookie">
     <template v-if="user">
       <h1 class="text-3xl mb-3">
         Welcome, {{ user.name }}! 👋
@@ -42,15 +42,5 @@ const logout = () => {
         </NButton>
       </div>
     </template>
-
-    <template #tips>
-      <div>
-        This demo showcases using the
-        <NuxtLink to="https://v3.nuxtjs.org/docs/usage/cookies" target="_blank">
-          useCookie
-        </NuxtLink>
-        API to persist small amounts of data that can be used both client-side and server-side.
-      </div>
-    </template>
   </NuxtExampleLayout>
 </template>