diff --git a/docs/components/app/AppLayout.vue b/docs/components/app/AppLayout.vue
index 6d13cfc2ac..18b862f46e 100644
--- a/docs/components/app/AppLayout.vue
+++ b/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 ''
     }
   }
 })
diff --git a/docs/components/atoms/Sandbox.vue b/docs/components/atoms/Sandbox.vue
new file mode 100644
index 0000000000..4186b04149
--- /dev/null
+++ b/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>
diff --git a/docs/components/templates/Example.vue b/docs/components/templates/Example.vue
new file mode 100644
index 0000000000..a09688a513
--- /dev/null
+++ b/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>
diff --git a/docs/content/4.examples/0.essentials/hello-world.md b/docs/content/4.examples/0.essentials/hello-world.md
new file mode 100644
index 0000000000..243c63daf2
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/1.app/error-handling.md b/docs/content/4.examples/1.app/error-handling.md
new file mode 100644
index 0000000000..8398220945
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/1.app/plugins.md b/docs/content/4.examples/1.app/plugins.md
new file mode 100644
index 0000000000..93fa2e938f
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/2.auto-imports/components.md b/docs/content/4.examples/2.auto-imports/components.md
new file mode 100644
index 0000000000..43d7c9e811
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/2.auto-imports/composables.md b/docs/content/4.examples/2.auto-imports/composables.md
new file mode 100644
index 0000000000..7dfa050ecf
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/3.composables/use-async-data.md b/docs/content/4.examples/3.composables/use-async-data.md
new file mode 100644
index 0000000000..e5fe6becfa
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/3.composables/use-cookie.md b/docs/content/4.examples/3.composables/use-cookie.md
new file mode 100644
index 0000000000..bd71e42421
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/3.composables/use-fetch.md b/docs/content/4.examples/3.composables/use-fetch.md
new file mode 100644
index 0000000000..05ab182db9
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/3.composables/use-meta.md b/docs/content/4.examples/3.composables/use-meta.md
new file mode 100644
index 0000000000..b910efab73
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/3.composables/use-state.md b/docs/content/4.examples/3.composables/use-state.md
new file mode 100644
index 0000000000..524a2fe73a
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/4.routing/layouts.md b/docs/content/4.examples/4.routing/layouts.md
new file mode 100644
index 0000000000..309aba9486
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/4.routing/middleware.md b/docs/content/4.examples/4.routing/middleware.md
new file mode 100644
index 0000000000..a867f19c67
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/4.routing/nuxt-link.md b/docs/content/4.examples/4.routing/nuxt-link.md
new file mode 100644
index 0000000000..8be8cd7ae5
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/4.routing/pages.md b/docs/content/4.examples/4.routing/pages.md
new file mode 100644
index 0000000000..96d3f63d89
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/4.routing/universal-router.md b/docs/content/4.examples/4.routing/universal-router.md
new file mode 100644
index 0000000000..f52df48370
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/5.advanced/config-extends.md b/docs/content/4.examples/5.advanced/config-extends.md
new file mode 100644
index 0000000000..44e12bdfb7
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/5.advanced/module-extend-pages.md b/docs/content/4.examples/5.advanced/module-extend-pages.md
new file mode 100644
index 0000000000..c34fd92af3
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/5.advanced/test.md b/docs/content/4.examples/5.advanced/test.md
new file mode 100644
index 0000000000..fdf3078207
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/6.experimental/reactivity-transform.md b/docs/content/4.examples/6.experimental/reactivity-transform.md
new file mode 100644
index 0000000000..888b6c4f87
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/6.experimental/wasm.md b/docs/content/4.examples/6.experimental/wasm.md
new file mode 100644
index 0000000000..6dd502905a
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/7.other/locale.md b/docs/content/4.examples/7.other/locale.md
new file mode 100644
index 0000000000..01c37c2dce
--- /dev/null
+++ b/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"}
diff --git a/docs/content/4.examples/index.md b/docs/content/4.examples/index.md
new file mode 100644
index 0000000000..acf6d0c78a
--- /dev/null
+++ b/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
+---
diff --git a/docs/content/4.community/1.getting-help.md b/docs/content/5.community/1.getting-help.md
similarity index 100%
rename from docs/content/4.community/1.getting-help.md
rename to docs/content/5.community/1.getting-help.md
diff --git a/docs/content/4.community/2.reporting-bugs.md b/docs/content/5.community/2.reporting-bugs.md
similarity index 100%
rename from docs/content/4.community/2.reporting-bugs.md
rename to docs/content/5.community/2.reporting-bugs.md
diff --git a/docs/content/4.community/3.contribution.md b/docs/content/5.community/3.contribution.md
similarity index 100%
rename from docs/content/4.community/3.contribution.md
rename to docs/content/5.community/3.contribution.md
diff --git a/docs/content/4.community/4.roadmap.md b/docs/content/5.community/4.roadmap.md
similarity index 100%
rename from docs/content/4.community/4.roadmap.md
rename to docs/content/5.community/4.roadmap.md
diff --git a/docs/content/4.community/index.md b/docs/content/5.community/index.md
similarity index 100%
rename from docs/content/4.community/index.md
rename to docs/content/5.community/index.md
diff --git a/docs/content/_collections/header.md b/docs/content/_collections/header.md
index ce34c8f6b1..69ad9598b0 100644
--- a/docs/content/_collections/header.md
+++ b/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'
diff --git a/examples/README.md b/examples/README.md
index cd0f41be6b..025e64a94e 100644
--- a/examples/README.md
+++ b/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) |
-| `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) |
-| `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) |
-| `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) |
-| `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) |
-| `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) |
-| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
diff --git a/examples/config-extends/base/components/BaseButton.vue b/examples/advanced/config-extends/base/components/BaseButton.vue
similarity index 100%
rename from examples/config-extends/base/components/BaseButton.vue
rename to examples/advanced/config-extends/base/components/BaseButton.vue
diff --git a/examples/config-extends/base/components/FancyButton.vue b/examples/advanced/config-extends/base/components/FancyButton.vue
similarity index 100%
rename from examples/config-extends/base/components/FancyButton.vue
rename to examples/advanced/config-extends/base/components/FancyButton.vue
diff --git a/examples/config-extends/base/composables/foo.ts b/examples/advanced/config-extends/base/composables/foo.ts
similarity index 100%
rename from examples/config-extends/base/composables/foo.ts
rename to examples/advanced/config-extends/base/composables/foo.ts
diff --git a/examples/config-extends/base/middleware/foo.ts b/examples/advanced/config-extends/base/middleware/foo.ts
similarity index 100%
rename from examples/config-extends/base/middleware/foo.ts
rename to examples/advanced/config-extends/base/middleware/foo.ts
diff --git a/examples/config-extends/base/nuxt.config.ts b/examples/advanced/config-extends/base/nuxt.config.ts
similarity index 100%
rename from examples/config-extends/base/nuxt.config.ts
rename to examples/advanced/config-extends/base/nuxt.config.ts
diff --git a/examples/config-extends/base/pages/foo.vue b/examples/advanced/config-extends/base/pages/foo.vue
similarity index 100%
rename from examples/config-extends/base/pages/foo.vue
rename to examples/advanced/config-extends/base/pages/foo.vue
diff --git a/examples/config-extends/base/plugins/my-plugin.ts b/examples/advanced/config-extends/base/plugins/my-plugin.ts
similarity index 100%
rename from examples/config-extends/base/plugins/my-plugin.ts
rename to examples/advanced/config-extends/base/plugins/my-plugin.ts
diff --git a/examples/config-extends/base/server/api/base.ts b/examples/advanced/config-extends/base/server/api/base.ts
similarity index 100%
rename from examples/config-extends/base/server/api/base.ts
rename to examples/advanced/config-extends/base/server/api/base.ts
diff --git a/examples/config-extends/base/utils/bar.ts b/examples/advanced/config-extends/base/utils/bar.ts
similarity index 100%
rename from examples/config-extends/base/utils/bar.ts
rename to examples/advanced/config-extends/base/utils/bar.ts
diff --git a/examples/config-extends/components/FancyButton.vue b/examples/advanced/config-extends/components/FancyButton.vue
similarity index 100%
rename from examples/config-extends/components/FancyButton.vue
rename to examples/advanced/config-extends/components/FancyButton.vue
diff --git a/examples/config-extends/nuxt.config.ts b/examples/advanced/config-extends/nuxt.config.ts
similarity index 100%
rename from examples/config-extends/nuxt.config.ts
rename to examples/advanced/config-extends/nuxt.config.ts
diff --git a/examples/config-extends/package.json b/examples/advanced/config-extends/package.json
similarity index 100%
rename from examples/config-extends/package.json
rename to examples/advanced/config-extends/package.json
diff --git a/examples/config-extends/pages/index.vue b/examples/advanced/config-extends/pages/index.vue
similarity index 57%
rename from examples/config-extends/pages/index.vue
rename to examples/advanced/config-extends/pages/index.vue
index 75814a417e..bea4876876 100644
--- a/examples/config-extends/pages/index.vue
+++ b/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>
 
diff --git a/examples/config-extends/server/api/hello.ts b/examples/advanced/config-extends/server/api/hello.ts
similarity index 100%
rename from examples/config-extends/server/api/hello.ts
rename to examples/advanced/config-extends/server/api/hello.ts
diff --git a/examples/config-extends/tsconfig.json b/examples/advanced/config-extends/tsconfig.json
similarity index 100%
rename from examples/config-extends/tsconfig.json
rename to examples/advanced/config-extends/tsconfig.json
diff --git a/examples/config-extends/ui/components/Button.vue b/examples/advanced/config-extends/ui/components/Button.vue
similarity index 100%
rename from examples/config-extends/ui/components/Button.vue
rename to examples/advanced/config-extends/ui/components/Button.vue
diff --git a/examples/config-extends/ui/nuxt.config.ts b/examples/advanced/config-extends/ui/nuxt.config.ts
similarity index 100%
rename from examples/config-extends/ui/nuxt.config.ts
rename to examples/advanced/config-extends/ui/nuxt.config.ts
diff --git a/examples/advanced/module-extend-pages/layouts/default.vue b/examples/advanced/module-extend-pages/layouts/default.vue
new file mode 100644
index 0000000000..fec82618c2
--- /dev/null
+++ b/examples/advanced/module-extend-pages/layouts/default.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtExampleLayout example="module-extend-pages">
+    <slot />
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/module-extend-pages/modules/pages/index.ts b/examples/advanced/module-extend-pages/modules/pages/index.ts
similarity index 100%
rename from examples/module-extend-pages/modules/pages/index.ts
rename to examples/advanced/module-extend-pages/modules/pages/index.ts
diff --git a/examples/module-extend-pages/modules/pages/pages/test.vue b/examples/advanced/module-extend-pages/modules/pages/pages/test.vue
similarity index 100%
rename from examples/module-extend-pages/modules/pages/pages/test.vue
rename to examples/advanced/module-extend-pages/modules/pages/pages/test.vue
diff --git a/examples/module-extend-pages/nuxt.config.ts b/examples/advanced/module-extend-pages/nuxt.config.ts
similarity index 100%
rename from examples/module-extend-pages/nuxt.config.ts
rename to examples/advanced/module-extend-pages/nuxt.config.ts
diff --git a/examples/module-extend-pages/package.json b/examples/advanced/module-extend-pages/package.json
similarity index 100%
rename from examples/module-extend-pages/package.json
rename to examples/advanced/module-extend-pages/package.json
diff --git a/examples/module-extend-pages/pages/index.vue b/examples/advanced/module-extend-pages/pages/index.vue
similarity index 100%
rename from examples/module-extend-pages/pages/index.vue
rename to examples/advanced/module-extend-pages/pages/index.vue
diff --git a/examples/hello-world/tsconfig.json b/examples/advanced/module-extend-pages/tsconfig.json
similarity index 100%
rename from examples/hello-world/tsconfig.json
rename to examples/advanced/module-extend-pages/tsconfig.json
diff --git a/examples/with-test/app.vue b/examples/advanced/test/app.vue
similarity index 100%
rename from examples/with-test/app.vue
rename to examples/advanced/test/app.vue
diff --git a/examples/hello-world/nuxt.config.ts b/examples/advanced/test/nuxt.config.ts
similarity index 100%
rename from examples/hello-world/nuxt.config.ts
rename to examples/advanced/test/nuxt.config.ts
diff --git a/examples/with-test/package.json b/examples/advanced/test/package.json
similarity index 84%
rename from examples/with-test/package.json
rename to examples/advanced/test/package.json
index cb24fd9364..50a91c5b67 100644
--- a/examples/with-test/package.json
+++ b/examples/advanced/test/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-test",
+  "name": "example-test",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/with-test/tests/basic.test.ts b/examples/advanced/test/tests/basic.test.ts
similarity index 100%
rename from examples/with-test/tests/basic.test.ts
rename to examples/advanced/test/tests/basic.test.ts
diff --git a/examples/locale/tsconfig.json b/examples/advanced/test/tsconfig.json
similarity index 100%
rename from examples/locale/tsconfig.json
rename to examples/advanced/test/tsconfig.json
diff --git a/examples/with-errors/app.vue b/examples/app/error-handling/app.vue
similarity index 76%
rename from examples/with-errors/app.vue
rename to examples/app/error-handling/app.vue
index c1b3b30102..37059cb4e3 100644
--- a/examples/with-errors/app.vue
+++ b/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>
diff --git a/examples/with-errors/components/FaultyComponent.vue b/examples/app/error-handling/components/FaultyComponent.vue
similarity index 100%
rename from examples/with-errors/components/FaultyComponent.vue
rename to examples/app/error-handling/components/FaultyComponent.vue
diff --git a/examples/with-errors/components/ThrowError.vue b/examples/app/error-handling/components/ThrowError.vue
similarity index 100%
rename from examples/with-errors/components/ThrowError.vue
rename to examples/app/error-handling/components/ThrowError.vue
diff --git a/examples/with-errors/error.vue b/examples/app/error-handling/error.vue
similarity index 100%
rename from examples/with-errors/error.vue
rename to examples/app/error-handling/error.vue
diff --git a/examples/with-errors/middleware/error.global.ts b/examples/app/error-handling/middleware/error.global.ts
similarity index 100%
rename from examples/with-errors/middleware/error.global.ts
rename to examples/app/error-handling/middleware/error.global.ts
diff --git a/examples/locale/nuxt.config.ts b/examples/app/error-handling/nuxt.config.ts
similarity index 100%
rename from examples/locale/nuxt.config.ts
rename to examples/app/error-handling/nuxt.config.ts
diff --git a/examples/with-plugins/package.json b/examples/app/error-handling/package.json
similarity index 85%
rename from examples/with-plugins/package.json
rename to examples/app/error-handling/package.json
index 56c9bdc009..54dec6d724 100644
--- a/examples/with-plugins/package.json
+++ b/examples/app/error-handling/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-plugins",
+  "name": "example-error-handling",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/with-errors/pages/index.vue b/examples/app/error-handling/pages/index.vue
similarity index 100%
rename from examples/with-errors/pages/index.vue
rename to examples/app/error-handling/pages/index.vue
diff --git a/examples/with-errors/pages/other.vue b/examples/app/error-handling/pages/other.vue
similarity index 100%
rename from examples/with-errors/pages/other.vue
rename to examples/app/error-handling/pages/other.vue
diff --git a/examples/with-errors/plugins/error.ts b/examples/app/error-handling/plugins/error.ts
similarity index 100%
rename from examples/with-errors/plugins/error.ts
rename to examples/app/error-handling/plugins/error.ts
diff --git a/examples/with-errors/server/middleware/error.ts b/examples/app/error-handling/server/middleware/error.ts
similarity index 100%
rename from examples/with-errors/server/middleware/error.ts
rename to examples/app/error-handling/server/middleware/error.ts
diff --git a/examples/module-extend-pages/tsconfig.json b/examples/app/error-handling/tsconfig.json
similarity index 100%
rename from examples/module-extend-pages/tsconfig.json
rename to examples/app/error-handling/tsconfig.json
diff --git a/examples/app/plugins/app.vue b/examples/app/plugins/app.vue
new file mode 100644
index 0000000000..4ae0a04918
--- /dev/null
+++ b/examples/app/plugins/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtExampleLayout example="plugins">
+    <div>{{ $myPlugin() }}</div>
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/nuxt-link/nuxt.config.ts b/examples/app/plugins/nuxt.config.ts
similarity index 100%
rename from examples/nuxt-link/nuxt.config.ts
rename to examples/app/plugins/nuxt.config.ts
diff --git a/examples/with-wasm/package.json b/examples/app/plugins/package.json
similarity index 87%
rename from examples/with-wasm/package.json
rename to examples/app/plugins/package.json
index 120e128d7e..237df6f08a 100644
--- a/examples/with-wasm/package.json
+++ b/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"
   }
 }
diff --git a/examples/with-plugins/plugins/my-plugin.ts b/examples/app/plugins/plugins/my-plugin.ts
similarity index 100%
rename from examples/with-plugins/plugins/my-plugin.ts
rename to examples/app/plugins/plugins/my-plugin.ts
diff --git a/examples/nuxt-link/tsconfig.json b/examples/app/plugins/tsconfig.json
similarity index 100%
rename from examples/nuxt-link/tsconfig.json
rename to examples/app/plugins/tsconfig.json
diff --git a/examples/auto-imports/components/app.vue b/examples/auto-imports/components/app.vue
new file mode 100644
index 0000000000..3ff9465ca9
--- /dev/null
+++ b/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>
diff --git a/examples/with-components/components/HelloWorld.vue b/examples/auto-imports/components/components/HelloWorld.vue
similarity index 100%
rename from examples/with-components/components/HelloWorld.vue
rename to examples/auto-imports/components/components/HelloWorld.vue
diff --git a/examples/with-components/components/Nuxt3.vue b/examples/auto-imports/components/components/Nuxt3.vue
similarity index 100%
rename from examples/with-components/components/Nuxt3.vue
rename to examples/auto-imports/components/components/Nuxt3.vue
diff --git a/examples/with-components/components/parent-folder/Hello.vue b/examples/auto-imports/components/components/parent-folder/Hello.vue
similarity index 100%
rename from examples/with-components/components/parent-folder/Hello.vue
rename to examples/auto-imports/components/components/parent-folder/Hello.vue
diff --git a/examples/with-components/nuxt.config.ts b/examples/auto-imports/components/nuxt.config.ts
similarity index 100%
rename from examples/with-components/nuxt.config.ts
rename to examples/auto-imports/components/nuxt.config.ts
diff --git a/examples/with-components/other-components-folder/with-prefix.vue b/examples/auto-imports/components/other-components-folder/with-prefix.vue
similarity index 100%
rename from examples/with-components/other-components-folder/with-prefix.vue
rename to examples/auto-imports/components/other-components-folder/with-prefix.vue
diff --git a/examples/with-pages/package.json b/examples/auto-imports/components/package.json
similarity index 86%
rename from examples/with-pages/package.json
rename to examples/auto-imports/components/package.json
index fa321597db..1a0664af9a 100644
--- a/examples/with-pages/package.json
+++ b/examples/auto-imports/components/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-pages",
+  "name": "example-components",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/use-async-data/tsconfig.json b/examples/auto-imports/components/tsconfig.json
similarity index 100%
rename from examples/use-async-data/tsconfig.json
rename to examples/auto-imports/components/tsconfig.json
diff --git a/examples/auto-imports/composables/app.vue b/examples/auto-imports/composables/app.vue
new file mode 100644
index 0000000000..38bbaff067
--- /dev/null
+++ b/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>
diff --git a/examples/with-composables/composables/use-foo.ts b/examples/auto-imports/composables/composables/use-foo.ts
similarity index 100%
rename from examples/with-composables/composables/use-foo.ts
rename to examples/auto-imports/composables/composables/use-foo.ts
diff --git a/examples/use-async-data/nuxt.config.ts b/examples/auto-imports/composables/nuxt.config.ts
similarity index 100%
rename from examples/use-async-data/nuxt.config.ts
rename to examples/auto-imports/composables/nuxt.config.ts
diff --git a/examples/with-errors/package.json b/examples/auto-imports/composables/package.json
similarity index 86%
rename from examples/with-errors/package.json
rename to examples/auto-imports/composables/package.json
index e73ff53ed4..56272b7522 100644
--- a/examples/with-errors/package.json
+++ b/examples/auto-imports/composables/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-errors",
+  "name": "example-composables",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/use-async-data/app.vue b/examples/composables/use-async-data/app.vue
similarity index 55%
rename from examples/use-async-data/app.vue
rename to examples/composables/use-async-data/app.vue
index 6cf95b41d6..55e5bf03a6 100644
--- a/examples/use-async-data/app.vue
+++ b/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>
diff --git a/examples/use-async-data/components/CounterExample.vue b/examples/composables/use-async-data/components/CounterExample.vue
similarity index 100%
rename from examples/use-async-data/components/CounterExample.vue
rename to examples/composables/use-async-data/components/CounterExample.vue
diff --git a/examples/use-async-data/components/MountainExample.vue b/examples/composables/use-async-data/components/MountainExample.vue
similarity index 100%
rename from examples/use-async-data/components/MountainExample.vue
rename to examples/composables/use-async-data/components/MountainExample.vue
diff --git a/examples/use-cookie/nuxt.config.ts b/examples/composables/use-async-data/nuxt.config.ts
similarity index 100%
rename from examples/use-cookie/nuxt.config.ts
rename to examples/composables/use-async-data/nuxt.config.ts
diff --git a/examples/use-async-data/package.json b/examples/composables/use-async-data/package.json
similarity index 100%
rename from examples/use-async-data/package.json
rename to examples/composables/use-async-data/package.json
diff --git a/examples/use-async-data/server/api/hello.js b/examples/composables/use-async-data/server/api/hello.js
similarity index 100%
rename from examples/use-async-data/server/api/hello.js
rename to examples/composables/use-async-data/server/api/hello.js
diff --git a/examples/use-cookie/tsconfig.json b/examples/composables/use-async-data/tsconfig.json
similarity index 100%
rename from examples/use-cookie/tsconfig.json
rename to examples/composables/use-async-data/tsconfig.json
diff --git a/examples/use-cookie/app.vue b/examples/composables/use-cookie/app.vue
similarity index 74%
rename from examples/use-cookie/app.vue
rename to examples/composables/use-cookie/app.vue
index 6573306279..d15f7848d1 100644
--- a/examples/use-cookie/app.vue
+++ b/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>
diff --git a/examples/use-fetch/nuxt.config.ts b/examples/composables/use-cookie/nuxt.config.ts
similarity index 100%
rename from examples/use-fetch/nuxt.config.ts
rename to examples/composables/use-cookie/nuxt.config.ts
diff --git a/examples/use-cookie/package.json b/examples/composables/use-cookie/package.json
similarity index 100%
rename from examples/use-cookie/package.json
rename to examples/composables/use-cookie/package.json
diff --git a/examples/use-fetch/tsconfig.json b/examples/composables/use-cookie/tsconfig.json
similarity index 100%
rename from examples/use-fetch/tsconfig.json
rename to examples/composables/use-cookie/tsconfig.json
diff --git a/examples/composables/use-fetch/app.vue b/examples/composables/use-fetch/app.vue
new file mode 100644
index 0000000000..60645e1de1
--- /dev/null
+++ b/examples/composables/use-fetch/app.vue
@@ -0,0 +1,16 @@
+<script setup>
+const count = ref(1)
+const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { token: 123 } })
+</script>
+
+<template>
+  <NuxtExampleLayout example="use-fetch">
+    <div>
+      Fetch result:
+      <pre class="text-left"><code>{{ data }}</code></pre>
+      <NButton @click="count++">
+        +
+      </NButton>
+    </div>
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/use-meta/nuxt.config.ts b/examples/composables/use-fetch/nuxt.config.ts
similarity index 100%
rename from examples/use-meta/nuxt.config.ts
rename to examples/composables/use-fetch/nuxt.config.ts
diff --git a/examples/use-fetch/package.json b/examples/composables/use-fetch/package.json
similarity index 100%
rename from examples/use-fetch/package.json
rename to examples/composables/use-fetch/package.json
diff --git a/examples/use-fetch/server/api/hello.ts b/examples/composables/use-fetch/server/api/hello.ts
similarity index 100%
rename from examples/use-fetch/server/api/hello.ts
rename to examples/composables/use-fetch/server/api/hello.ts
diff --git a/examples/use-meta/tsconfig.json b/examples/composables/use-fetch/tsconfig.json
similarity index 100%
rename from examples/use-meta/tsconfig.json
rename to examples/composables/use-fetch/tsconfig.json
diff --git a/examples/use-meta/app.vue b/examples/composables/use-meta/app.vue
similarity index 64%
rename from examples/use-meta/app.vue
rename to examples/composables/use-meta/app.vue
index 7590d28092..210c0289b0 100644
--- a/examples/use-meta/app.vue
+++ b/examples/composables/use-meta/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtExampleLayout example="use-meta" show-tips>
+  <NuxtExampleLayout example="use-meta">
     <div
       class="bg-gray-400/10 border-2 border-dashed border-gray-400/50 rounded-xl py-8 px-2 op-80"
     >
@@ -20,21 +20,6 @@
         Click me and see the dynamic title
       </NButton>
     </div>
-
-    <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>
 </template>
 
diff --git a/examples/use-state/nuxt.config.ts b/examples/composables/use-meta/nuxt.config.ts
similarity index 100%
rename from examples/use-state/nuxt.config.ts
rename to examples/composables/use-meta/nuxt.config.ts
diff --git a/examples/use-meta/package.json b/examples/composables/use-meta/package.json
similarity index 100%
rename from examples/use-meta/package.json
rename to examples/composables/use-meta/package.json
diff --git a/examples/with-components/tsconfig.json b/examples/composables/use-meta/tsconfig.json
similarity index 100%
rename from examples/with-components/tsconfig.json
rename to examples/composables/use-meta/tsconfig.json
diff --git a/examples/composables/use-state/app.vue b/examples/composables/use-state/app.vue
new file mode 100644
index 0000000000..450f6cf6e0
--- /dev/null
+++ b/examples/composables/use-state/app.vue
@@ -0,0 +1,17 @@
+<script setup>
+const counter = useState('counter', () => Math.round(Math.random() * 1000))
+</script>
+
+<template>
+  <NuxtExampleLayout example="use-state">
+    <div>Counter: {{ counter }}</div>
+    <div>
+      <NButton class="font-mono" @click="counter++">
+        +
+      </NButton>
+      <NButton class="font-mono" @click="counter--">
+        -
+      </NButton>
+    </div>
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/with-composables/nuxt.config.ts b/examples/composables/use-state/nuxt.config.ts
similarity index 100%
rename from examples/with-composables/nuxt.config.ts
rename to examples/composables/use-state/nuxt.config.ts
diff --git a/examples/use-state/package.json b/examples/composables/use-state/package.json
similarity index 100%
rename from examples/use-state/package.json
rename to examples/composables/use-state/package.json
diff --git a/examples/use-state/tsconfig.json b/examples/composables/use-state/tsconfig.json
similarity index 100%
rename from examples/use-state/tsconfig.json
rename to examples/composables/use-state/tsconfig.json
diff --git a/examples/hello-world/app.vue b/examples/essentials/hello-world/app.vue
similarity index 100%
rename from examples/hello-world/app.vue
rename to examples/essentials/hello-world/app.vue
diff --git a/examples/with-test/nuxt.config.ts b/examples/essentials/hello-world/nuxt.config.ts
similarity index 100%
rename from examples/with-test/nuxt.config.ts
rename to examples/essentials/hello-world/nuxt.config.ts
diff --git a/examples/hello-world/package.json b/examples/essentials/hello-world/package.json
similarity index 100%
rename from examples/hello-world/package.json
rename to examples/essentials/hello-world/package.json
diff --git a/examples/with-errors/tsconfig.json b/examples/essentials/hello-world/tsconfig.json
similarity index 100%
rename from examples/with-errors/tsconfig.json
rename to examples/essentials/hello-world/tsconfig.json
diff --git a/examples/experimental/reactivity-transform/app.vue b/examples/experimental/reactivity-transform/app.vue
new file mode 100644
index 0000000000..3a0e100125
--- /dev/null
+++ b/examples/experimental/reactivity-transform/app.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+let count = $ref(0)
+
+function inc () {
+  count++
+}
+function dec () {
+  count--
+}
+</script>
+
+<template>
+  <NuxtExampleLayout example="reactivity-transform">
+    <div>
+      <Label :count="count" />
+      <div class="flex gap-1 justify-center">
+        <NButton @click="inc()">
+          Inc
+        </NButton>
+        <NButton @click="dec()">
+          Dec
+        </NButton>
+      </div>
+    </div>
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/with-reactivity-transform/components/label.vue b/examples/experimental/reactivity-transform/components/label.vue
similarity index 100%
rename from examples/with-reactivity-transform/components/label.vue
rename to examples/experimental/reactivity-transform/components/label.vue
diff --git a/examples/with-reactivity-transform/nuxt.config.ts b/examples/experimental/reactivity-transform/nuxt.config.ts
similarity index 100%
rename from examples/with-reactivity-transform/nuxt.config.ts
rename to examples/experimental/reactivity-transform/nuxt.config.ts
diff --git a/examples/with-composables/package.json b/examples/experimental/reactivity-transform/package.json
similarity index 83%
rename from examples/with-composables/package.json
rename to examples/experimental/reactivity-transform/package.json
index 666b5ab0e0..ea8e4cb6af 100644
--- a/examples/with-composables/package.json
+++ b/examples/experimental/reactivity-transform/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-composables",
+  "name": "example-reactivity-transform",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/with-layouts/tsconfig.json b/examples/experimental/reactivity-transform/tsconfig.json
similarity index 100%
rename from examples/with-layouts/tsconfig.json
rename to examples/experimental/reactivity-transform/tsconfig.json
diff --git a/examples/with-wasm/app.vue b/examples/experimental/wasm/app.vue
similarity index 69%
rename from examples/with-wasm/app.vue
rename to examples/experimental/wasm/app.vue
index 7320d8c66e..cabccf8fca 100644
--- a/examples/with-wasm/app.vue
+++ b/examples/experimental/wasm/app.vue
@@ -8,7 +8,7 @@ const { data } = await useAsyncData('sum',
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="with-wasm">
+  <NuxtExampleLayout example="wasm">
     <p>
       <code>a = 100</code>
     </p>
@@ -20,11 +20,5 @@ const { data } = await useAsyncData('sum',
       <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>
diff --git a/examples/with-wasm/nuxt.config.ts b/examples/experimental/wasm/nuxt.config.ts
similarity index 100%
rename from examples/with-wasm/nuxt.config.ts
rename to examples/experimental/wasm/nuxt.config.ts
diff --git a/examples/with-layouts/package.json b/examples/experimental/wasm/package.json
similarity index 86%
rename from examples/with-layouts/package.json
rename to examples/experimental/wasm/package.json
index 4bd41fa546..c398eb875b 100644
--- a/examples/with-layouts/package.json
+++ b/examples/experimental/wasm/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "example-with-layouts",
+  "name": "example-wasm",
   "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"
   }
 }
diff --git a/examples/with-wasm/server/api/sum.ts b/examples/experimental/wasm/server/api/sum.ts
similarity index 100%
rename from examples/with-wasm/server/api/sum.ts
rename to examples/experimental/wasm/server/api/sum.ts
diff --git a/examples/with-wasm/server/wasm/sum.wasm b/examples/experimental/wasm/server/wasm/sum.wasm
similarity index 100%
rename from examples/with-wasm/server/wasm/sum.wasm
rename to examples/experimental/wasm/server/wasm/sum.wasm
diff --git a/examples/with-wasm/server/wasm/sum.wat b/examples/experimental/wasm/server/wasm/sum.wat
similarity index 100%
rename from examples/with-wasm/server/wasm/sum.wat
rename to examples/experimental/wasm/server/wasm/sum.wat
diff --git a/examples/with-middleware/tsconfig.json b/examples/experimental/wasm/tsconfig.json
similarity index 100%
rename from examples/with-middleware/tsconfig.json
rename to examples/experimental/wasm/tsconfig.json
diff --git a/examples/module-extend-pages/layouts/default.vue b/examples/module-extend-pages/layouts/default.vue
deleted file mode 100644
index fc8a25bd56..0000000000
--- a/examples/module-extend-pages/layouts/default.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <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/nuxt-link/app.vue b/examples/nuxt-link/app.vue
deleted file mode 100644
index 79e9a9512e..0000000000
--- a/examples/nuxt-link/app.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <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>
-
-<style>
-.example a {
-  font-family: Arial, Helvetica, sans-serif;
-  padding: 1rem 10rem;
-  display: block;
-}
-</style>
diff --git a/examples/locale/app.vue b/examples/other/locale/app.vue
similarity index 63%
rename from examples/locale/app.vue
rename to examples/other/locale/app.vue
index 6c7d029d00..2ae6bc1670 100644
--- a/examples/locale/app.vue
+++ b/examples/other/locale/app.vue
@@ -6,7 +6,7 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="locale">
+  <NuxtExampleLayout example="locale">
     <h1 class="text-xl opacity-50">
       Nuxt birthday
     </h1>
@@ -20,14 +20,5 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
         {{ l }}
       </option>
     </select>
-
-    <template #tips>
-      <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.
-      </p>
-    </template>
   </NuxtExampleLayout>
 </template>
diff --git a/examples/locale/composables/locale.ts b/examples/other/locale/composables/locale.ts
similarity index 100%
rename from examples/locale/composables/locale.ts
rename to examples/other/locale/composables/locale.ts
diff --git a/examples/with-errors/nuxt.config.ts b/examples/other/locale/nuxt.config.ts
similarity index 100%
rename from examples/with-errors/nuxt.config.ts
rename to examples/other/locale/nuxt.config.ts
diff --git a/examples/locale/package.json b/examples/other/locale/package.json
similarity index 100%
rename from examples/locale/package.json
rename to examples/other/locale/package.json
diff --git a/examples/with-pages/tsconfig.json b/examples/other/locale/tsconfig.json
similarity index 100%
rename from examples/with-pages/tsconfig.json
rename to examples/other/locale/tsconfig.json
diff --git a/examples/with-layouts/layouts/custom.vue b/examples/routing/layouts/layouts/custom.vue
similarity index 100%
rename from examples/with-layouts/layouts/custom.vue
rename to examples/routing/layouts/layouts/custom.vue
diff --git a/examples/with-layouts/layouts/default.vue b/examples/routing/layouts/layouts/default.vue
similarity index 100%
rename from examples/with-layouts/layouts/default.vue
rename to examples/routing/layouts/layouts/default.vue
diff --git a/examples/with-layouts/layouts/other.vue b/examples/routing/layouts/layouts/other.vue
similarity index 100%
rename from examples/with-layouts/layouts/other.vue
rename to examples/routing/layouts/layouts/other.vue
diff --git a/examples/with-layouts/nuxt.config.ts b/examples/routing/layouts/nuxt.config.ts
similarity index 100%
rename from examples/with-layouts/nuxt.config.ts
rename to examples/routing/layouts/nuxt.config.ts
diff --git a/examples/routing/layouts/package.json b/examples/routing/layouts/package.json
new file mode 100644
index 0000000000..bcb61a5b9c
--- /dev/null
+++ b/examples/routing/layouts/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-layouts",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}
diff --git a/examples/with-layouts/pages/custom.vue b/examples/routing/layouts/pages/custom.vue
similarity index 100%
rename from examples/with-layouts/pages/custom.vue
rename to examples/routing/layouts/pages/custom.vue
diff --git a/examples/with-layouts/pages/default.vue b/examples/routing/layouts/pages/default.vue
similarity index 100%
rename from examples/with-layouts/pages/default.vue
rename to examples/routing/layouts/pages/default.vue
diff --git a/examples/with-layouts/pages/dynamic.vue b/examples/routing/layouts/pages/dynamic.vue
similarity index 100%
rename from examples/with-layouts/pages/dynamic.vue
rename to examples/routing/layouts/pages/dynamic.vue
diff --git a/examples/with-layouts/pages/index.vue b/examples/routing/layouts/pages/index.vue
similarity index 53%
rename from examples/with-layouts/pages/index.vue
rename to examples/routing/layouts/pages/index.vue
index 95164ab68f..aef6f4dd93 100644
--- a/examples/with-layouts/pages/index.vue
+++ b/examples/routing/layouts/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtExampleLayout show-tips example="with-layouts">
+  <NuxtExampleLayout example="layouts">
     <template #nav>
       <nav class="flex align-center gap-4 p-4">
         <NuxtLink to="/default">
@@ -13,14 +13,5 @@
         </NuxtLink>
       </nav>
     </template>
-
-    <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>
diff --git a/examples/with-plugins/tsconfig.json b/examples/routing/layouts/tsconfig.json
similarity index 100%
rename from examples/with-plugins/tsconfig.json
rename to examples/routing/layouts/tsconfig.json
diff --git a/examples/with-middleware/app.vue b/examples/routing/middleware/app.vue
similarity index 59%
rename from examples/with-middleware/app.vue
rename to examples/routing/middleware/app.vue
index 8571074416..c2f54b6721 100644
--- a/examples/with-middleware/app.vue
+++ b/examples/routing/middleware/app.vue
@@ -3,7 +3,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="with-middleware">
+  <NuxtExampleLayout example="middleware">
     <NuxtPage />
 
     <template #nav>
@@ -25,13 +25,5 @@ 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-middleware/middleware/always-run.global.ts b/examples/routing/middleware/middleware/always-run.global.ts
similarity index 100%
rename from examples/with-middleware/middleware/always-run.global.ts
rename to examples/routing/middleware/middleware/always-run.global.ts
diff --git a/examples/with-middleware/middleware/redirect-me.ts b/examples/routing/middleware/middleware/redirect-me.ts
similarity index 100%
rename from examples/with-middleware/middleware/redirect-me.ts
rename to examples/routing/middleware/middleware/redirect-me.ts
diff --git a/examples/with-middleware/nuxt.config.ts b/examples/routing/middleware/nuxt.config.ts
similarity index 100%
rename from examples/with-middleware/nuxt.config.ts
rename to examples/routing/middleware/nuxt.config.ts
diff --git a/examples/routing/middleware/package.json b/examples/routing/middleware/package.json
new file mode 100644
index 0000000000..ef6d04f35c
--- /dev/null
+++ b/examples/routing/middleware/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-middleware",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}
diff --git a/examples/with-middleware/pages/forbidden.vue b/examples/routing/middleware/pages/forbidden.vue
similarity index 100%
rename from examples/with-middleware/pages/forbidden.vue
rename to examples/routing/middleware/pages/forbidden.vue
diff --git a/examples/with-middleware/pages/index.vue b/examples/routing/middleware/pages/index.vue
similarity index 100%
rename from examples/with-middleware/pages/index.vue
rename to examples/routing/middleware/pages/index.vue
diff --git a/examples/with-middleware/pages/redirect.vue b/examples/routing/middleware/pages/redirect.vue
similarity index 100%
rename from examples/with-middleware/pages/redirect.vue
rename to examples/routing/middleware/pages/redirect.vue
diff --git a/examples/with-middleware/pages/secret.vue b/examples/routing/middleware/pages/secret.vue
similarity index 100%
rename from examples/with-middleware/pages/secret.vue
rename to examples/routing/middleware/pages/secret.vue
diff --git a/examples/with-middleware/plugins/add.ts b/examples/routing/middleware/plugins/add.ts
similarity index 100%
rename from examples/with-middleware/plugins/add.ts
rename to examples/routing/middleware/plugins/add.ts
diff --git a/examples/with-reactivity-transform/tsconfig.json b/examples/routing/middleware/tsconfig.json
similarity index 100%
rename from examples/with-reactivity-transform/tsconfig.json
rename to examples/routing/middleware/tsconfig.json
diff --git a/examples/routing/nuxt-link/app.vue b/examples/routing/nuxt-link/app.vue
new file mode 100644
index 0000000000..ee5f384e9f
--- /dev/null
+++ b/examples/routing/nuxt-link/app.vue
@@ -0,0 +1,13 @@
+<template>
+  <NuxtExampleLayout example="nuxt-link" class="example">
+    <NuxtPage />
+  </NuxtExampleLayout>
+</template>
+
+<style>
+.example a {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1rem 10rem;
+  display: block;
+}
+</style>
diff --git a/examples/nuxt-link/components/MyNuxtLink.js b/examples/routing/nuxt-link/components/MyNuxtLink.js
similarity index 100%
rename from examples/nuxt-link/components/MyNuxtLink.js
rename to examples/routing/nuxt-link/components/MyNuxtLink.js
diff --git a/examples/with-pages/nuxt.config.ts b/examples/routing/nuxt-link/nuxt.config.ts
similarity index 100%
rename from examples/with-pages/nuxt.config.ts
rename to examples/routing/nuxt-link/nuxt.config.ts
diff --git a/examples/nuxt-link/package.json b/examples/routing/nuxt-link/package.json
similarity index 100%
rename from examples/nuxt-link/package.json
rename to examples/routing/nuxt-link/package.json
diff --git a/examples/nuxt-link/pages/about.vue b/examples/routing/nuxt-link/pages/about.vue
similarity index 100%
rename from examples/nuxt-link/pages/about.vue
rename to examples/routing/nuxt-link/pages/about.vue
diff --git a/examples/nuxt-link/pages/index.vue b/examples/routing/nuxt-link/pages/index.vue
similarity index 100%
rename from examples/nuxt-link/pages/index.vue
rename to examples/routing/nuxt-link/pages/index.vue
diff --git a/examples/with-test/tsconfig.json b/examples/routing/nuxt-link/tsconfig.json
similarity index 100%
rename from examples/with-test/tsconfig.json
rename to examples/routing/nuxt-link/tsconfig.json
diff --git a/examples/with-pages/app.vue b/examples/routing/pages/app.vue
similarity index 75%
rename from examples/with-pages/app.vue
rename to examples/routing/pages/app.vue
index 59d0c05224..432b5209d4 100644
--- a/examples/with-pages/app.vue
+++ b/examples/routing/pages/app.vue
@@ -3,7 +3,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="with-pages">
+  <NuxtExampleLayout example="pages">
     <NuxtPage />
 
     <template #nav>
@@ -34,14 +34,5 @@ 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/nuxt.config.ts b/examples/routing/pages/nuxt.config.ts
similarity index 100%
rename from examples/with-plugins/nuxt.config.ts
rename to examples/routing/pages/nuxt.config.ts
diff --git a/examples/routing/pages/package.json b/examples/routing/pages/package.json
new file mode 100644
index 0000000000..3487242985
--- /dev/null
+++ b/examples/routing/pages/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-pages",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}
diff --git a/examples/with-pages/pages/about.vue b/examples/routing/pages/pages/about.vue
similarity index 100%
rename from examples/with-pages/pages/about.vue
rename to examples/routing/pages/pages/about.vue
diff --git a/examples/with-pages/pages/catchall/[...id].vue b/examples/routing/pages/pages/catchall/[...id].vue
similarity index 100%
rename from examples/with-pages/pages/catchall/[...id].vue
rename to examples/routing/pages/pages/catchall/[...id].vue
diff --git a/examples/with-pages/pages/index.vue b/examples/routing/pages/pages/index.vue
similarity index 100%
rename from examples/with-pages/pages/index.vue
rename to examples/routing/pages/pages/index.vue
diff --git a/examples/with-pages/pages/parent.vue b/examples/routing/pages/pages/parent.vue
similarity index 100%
rename from examples/with-pages/pages/parent.vue
rename to examples/routing/pages/pages/parent.vue
diff --git a/examples/with-pages/pages/parent/b.vue b/examples/routing/pages/pages/parent/b.vue
similarity index 100%
rename from examples/with-pages/pages/parent/b.vue
rename to examples/routing/pages/pages/parent/b.vue
diff --git a/examples/with-pages/pages/parent/index.vue b/examples/routing/pages/pages/parent/index.vue
similarity index 100%
rename from examples/with-pages/pages/parent/index.vue
rename to examples/routing/pages/pages/parent/index.vue
diff --git a/examples/with-pages/pages/parent/reload-[id].vue b/examples/routing/pages/pages/parent/reload-[id].vue
similarity index 100%
rename from examples/with-pages/pages/parent/reload-[id].vue
rename to examples/routing/pages/pages/parent/reload-[id].vue
diff --git a/examples/with-pages/pages/parent/static-[id].vue b/examples/routing/pages/pages/parent/static-[id].vue
similarity index 100%
rename from examples/with-pages/pages/parent/static-[id].vue
rename to examples/routing/pages/pages/parent/static-[id].vue
diff --git a/examples/with-universal-router/tsconfig.json b/examples/routing/pages/tsconfig.json
similarity index 100%
rename from examples/with-universal-router/tsconfig.json
rename to examples/routing/pages/tsconfig.json
diff --git a/examples/with-universal-router/app.vue b/examples/routing/universal-router/app.vue
similarity index 74%
rename from examples/with-universal-router/app.vue
rename to examples/routing/universal-router/app.vue
index 661b34f8c9..14ff1b1ff0 100644
--- a/examples/with-universal-router/app.vue
+++ b/examples/routing/universal-router/app.vue
@@ -4,7 +4,7 @@ const timer = useState('timer', () => 0)
 </script>
 
 <template>
-  <NuxtExampleLayout show-tips example="with-universal-router">
+  <NuxtExampleLayout example="universal-router">
     A page...
     <br>
 
@@ -31,13 +31,5 @@ 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-universal-router/nuxt.config.ts b/examples/routing/universal-router/nuxt.config.ts
similarity index 100%
rename from examples/with-universal-router/nuxt.config.ts
rename to examples/routing/universal-router/nuxt.config.ts
diff --git a/examples/with-components/package.json b/examples/routing/universal-router/package.json
similarity index 84%
rename from examples/with-components/package.json
rename to examples/routing/universal-router/package.json
index 8d92c0fd5f..9073a318b3 100644
--- a/examples/with-components/package.json
+++ b/examples/routing/universal-router/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-components",
+  "name": "example-universal-router",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/with-universal-router/plugins/add.ts b/examples/routing/universal-router/plugins/add.ts
similarity index 100%
rename from examples/with-universal-router/plugins/add.ts
rename to examples/routing/universal-router/plugins/add.ts
diff --git a/examples/with-wasm/tsconfig.json b/examples/routing/universal-router/tsconfig.json
similarity index 100%
rename from examples/with-wasm/tsconfig.json
rename to examples/routing/universal-router/tsconfig.json
diff --git a/examples/use-fetch/app.vue b/examples/use-fetch/app.vue
deleted file mode 100644
index a219fd6fbc..0000000000
--- a/examples/use-fetch/app.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-const count = ref(1)
-const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { token: 123 } })
-</script>
-
-<template>
-  <NuxtExampleLayout example="use-fetch" show-tips>
-    <div>
-      Fetch result:
-      <pre class="text-left"><code>{{ data }}</code></pre>
-      <NButton @click="count++">
-        +
-      </NButton>
-    </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>
-</template>
diff --git a/examples/use-state/app.vue b/examples/use-state/app.vue
deleted file mode 100644
index f7f59a4768..0000000000
--- a/examples/use-state/app.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-const counter = useState('counter', () => Math.round(Math.random() * 1000))
-</script>
-
-<template>
-  <NuxtExampleLayout show-tips example="use-state">
-    <div>Counter: {{ counter }}</div>
-    <div>
-      <NButton class="font-mono" @click="counter++">
-        +
-      </NButton>
-      <NButton class="font-mono" @click="counter--">
-        -
-      </NButton>
-    </div>
-
-    <template #tips>
-      <div>
-        <NuxtLink to="https://v3.nuxtjs.org/docs/usage/state" target="_blank">
-          useState
-        </NuxtLink>
-        is an SSR-friendly ref replacement.
-        Its value will be preserved after server-side rendering
-        and shared across all components using a unique key.
-      </div>
-    </template>
-  </NuxtExampleLayout>
-</template>
diff --git a/examples/with-components/app.vue b/examples/with-components/app.vue
deleted file mode 100644
index 74807a6ec4..0000000000
--- a/examples/with-components/app.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <NuxtExampleLayout show-tips example="with-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>
-
-    <template #tips>
-      <div>
-        <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>
-</template>
diff --git a/examples/with-components/nuxt.d.ts b/examples/with-components/nuxt.d.ts
deleted file mode 100644
index aa1c5d2112..0000000000
--- a/examples/with-components/nuxt.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// This file is auto generated by `nuxt prepare`
-// Please do not manually modify this file.
-
-/// <reference types="nuxt3" />
-/// <reference types="@nuxt/kit" />
-/// <reference types="@nuxt/nitro" />
-/// <reference path=".nuxt/components.d.ts" />
-/// <reference path=".nuxt/auto-imports.d.ts" />
-export {}
diff --git a/examples/with-composables/app.vue b/examples/with-composables/app.vue
deleted file mode 100644
index f4dd5c7cbd..0000000000
--- a/examples/with-composables/app.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<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>
-        <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()
-const b = useB()
-const c = useC()
-const d = useD()
-const foo = useFoo()
-</script>
diff --git a/examples/with-middleware/package.json b/examples/with-middleware/package.json
deleted file mode 100644
index bacf50d2ff..0000000000
--- a/examples/with-middleware/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "example-with-middleware",
-  "private": true,
-  "scripts": {
-    "build": "nuxi build",
-    "dev": "nuxi dev",
-    "start": "nuxi preview"
-  },
-  "devDependencies": {
-    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
-    "nuxt3": "latest"
-  }
-}
diff --git a/examples/with-plugins/app.vue b/examples/with-plugins/app.vue
deleted file mode 100644
index 5ac77493ab..0000000000
--- a/examples/with-plugins/app.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<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
deleted file mode 100644
index c938a88522..0000000000
--- a/examples/with-reactivity-transform/app.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-let count = $ref(0)
-
-function inc () {
-  count++
-}
-function dec () {
-  count--
-}
-</script>
-
-<template>
-  <NuxtExampleLayout show-tips example="with-reactivity-transform">
-    <div>
-      <Label :count="count" />
-      <div class="flex gap-1 justify-center">
-        <NButton @click="inc()">
-          Inc
-        </NButton>
-        <NButton @click="dec()">
-          Dec
-        </NButton>
-      </div>
-    </div>
-
-    <template #tips>
-      <div class="flex-auto">
-        <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>
-</template>
diff --git a/examples/with-reactivity-transform/package.json b/examples/with-reactivity-transform/package.json
deleted file mode 100644
index a38f3a0b00..0000000000
--- a/examples/with-reactivity-transform/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "example-with-reactivity-transform",
-  "private": true,
-  "scripts": {
-    "build": "nuxi build",
-    "dev": "nuxi dev",
-    "start": "nuxi preview"
-  },
-  "devDependencies": {
-    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
-    "nuxt3": "latest"
-  }
-}
diff --git a/examples/with-universal-router/package.json b/examples/with-universal-router/package.json
deleted file mode 100644
index 3026a01a22..0000000000
--- a/examples/with-universal-router/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "example-with-universal-router",
-  "private": true,
-  "scripts": {
-    "build": "nuxi build",
-    "dev": "nuxi dev",
-    "start": "nuxi preview"
-  },
-  "devDependencies": {
-    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
-    "nuxt3": "latest"
-  }
-}
diff --git a/package.json b/package.json
index 81ed1010d0..175f1669c5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "workspaces": [
     "packages/*",
-    "examples/*",
+    "examples/*/*",
     "test/fixtures/*",
     "playground"
   ],
diff --git a/yarn.lock b/yarn.lock
index 7ce75bca6c..b8b7e8a962 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10424,187 +10424,187 @@ __metadata:
   languageName: node
   linkType: hard
 
-"example-config-extends@workspace:examples/config-extends":
+"example-components@workspace:examples/auto-imports/components":
   version: 0.0.0-use.local
-  resolution: "example-config-extends@workspace:examples/config-extends"
+  resolution: "example-components@workspace:examples/auto-imports/components"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-hello-world@workspace:examples/hello-world":
+"example-composables@workspace:examples/auto-imports/composables":
   version: 0.0.0-use.local
-  resolution: "example-hello-world@workspace:examples/hello-world"
-  dependencies:
-    nuxt3: latest
-  languageName: unknown
-  linkType: soft
-
-"example-locale@workspace:examples/locale":
-  version: 0.0.0-use.local
-  resolution: "example-locale@workspace:examples/locale"
+  resolution: "example-composables@workspace:examples/auto-imports/composables"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-module-extend-pages@workspace:examples/module-extend-pages":
+"example-config-extends@workspace:examples/advanced/config-extends":
   version: 0.0.0-use.local
-  resolution: "example-module-extend-pages@workspace:examples/module-extend-pages"
+  resolution: "example-config-extends@workspace:examples/advanced/config-extends"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-nuxt-link@workspace:examples/nuxt-link":
+"example-error-handling@workspace:examples/app/error-handling":
   version: 0.0.0-use.local
-  resolution: "example-nuxt-link@workspace:examples/nuxt-link"
+  resolution: "example-error-handling@workspace:examples/app/error-handling"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-use-async-data@workspace:examples/use-async-data":
+"example-hello-world@workspace:examples/essentials/hello-world":
   version: 0.0.0-use.local
-  resolution: "example-use-async-data@workspace:examples/use-async-data"
+  resolution: "example-hello-world@workspace:examples/essentials/hello-world"
+  dependencies:
+    nuxt3: latest
+  languageName: unknown
+  linkType: soft
+
+"example-layouts@workspace:examples/routing/layouts":
+  version: 0.0.0-use.local
+  resolution: "example-layouts@workspace:examples/routing/layouts"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-use-cookie@workspace:examples/use-cookie":
+"example-locale@workspace:examples/other/locale":
   version: 0.0.0-use.local
-  resolution: "example-use-cookie@workspace:examples/use-cookie"
+  resolution: "example-locale@workspace:examples/other/locale"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-use-fetch@workspace:examples/use-fetch":
+"example-middleware@workspace:examples/routing/middleware":
   version: 0.0.0-use.local
-  resolution: "example-use-fetch@workspace:examples/use-fetch"
+  resolution: "example-middleware@workspace:examples/routing/middleware"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-use-meta@workspace:examples/use-meta":
+"example-module-extend-pages@workspace:examples/advanced/module-extend-pages":
   version: 0.0.0-use.local
-  resolution: "example-use-meta@workspace:examples/use-meta"
+  resolution: "example-module-extend-pages@workspace:examples/advanced/module-extend-pages"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-use-state@workspace:examples/use-state":
+"example-nuxt-link@workspace:examples/routing/nuxt-link":
   version: 0.0.0-use.local
-  resolution: "example-use-state@workspace:examples/use-state"
+  resolution: "example-nuxt-link@workspace:examples/routing/nuxt-link"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-components@workspace:examples/with-components":
+"example-pages@workspace:examples/routing/pages":
   version: 0.0.0-use.local
-  resolution: "example-with-components@workspace:examples/with-components"
+  resolution: "example-pages@workspace:examples/routing/pages"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-composables@workspace:examples/with-composables":
+"example-plugins@workspace:examples/app/plugins":
   version: 0.0.0-use.local
-  resolution: "example-with-composables@workspace:examples/with-composables"
+  resolution: "example-plugins@workspace:examples/app/plugins"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-errors@workspace:examples/with-errors":
+"example-reactivity-transform@workspace:examples/experimental/reactivity-transform":
   version: 0.0.0-use.local
-  resolution: "example-with-errors@workspace:examples/with-errors"
+  resolution: "example-reactivity-transform@workspace:examples/experimental/reactivity-transform"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-layouts@workspace:examples/with-layouts":
+"example-test@workspace:examples/advanced/test":
   version: 0.0.0-use.local
-  resolution: "example-with-layouts@workspace:examples/with-layouts"
+  resolution: "example-test@workspace:examples/advanced/test"
+  dependencies:
+    nuxt3: latest
+  languageName: unknown
+  linkType: soft
+
+"example-universal-router@workspace:examples/routing/universal-router":
+  version: 0.0.0-use.local
+  resolution: "example-universal-router@workspace:examples/routing/universal-router"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-middleware@workspace:examples/with-middleware":
+"example-use-async-data@workspace:examples/composables/use-async-data":
   version: 0.0.0-use.local
-  resolution: "example-with-middleware@workspace:examples/with-middleware"
+  resolution: "example-use-async-data@workspace:examples/composables/use-async-data"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-pages@workspace:examples/with-pages":
+"example-use-cookie@workspace:examples/composables/use-cookie":
   version: 0.0.0-use.local
-  resolution: "example-with-pages@workspace:examples/with-pages"
+  resolution: "example-use-cookie@workspace:examples/composables/use-cookie"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-plugins@workspace:examples/with-plugins":
+"example-use-fetch@workspace:examples/composables/use-fetch":
   version: 0.0.0-use.local
-  resolution: "example-with-plugins@workspace:examples/with-plugins"
+  resolution: "example-use-fetch@workspace:examples/composables/use-fetch"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-reactivity-transform@workspace:examples/with-reactivity-transform":
+"example-use-meta@workspace:examples/composables/use-meta":
   version: 0.0.0-use.local
-  resolution: "example-with-reactivity-transform@workspace:examples/with-reactivity-transform"
+  resolution: "example-use-meta@workspace:examples/composables/use-meta"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-test@workspace:examples/with-test":
+"example-use-state@workspace:examples/composables/use-state":
   version: 0.0.0-use.local
-  resolution: "example-with-test@workspace:examples/with-test"
-  dependencies:
-    nuxt3: latest
-  languageName: unknown
-  linkType: soft
-
-"example-with-universal-router@workspace:examples/with-universal-router":
-  version: 0.0.0-use.local
-  resolution: "example-with-universal-router@workspace:examples/with-universal-router"
+  resolution: "example-use-state@workspace:examples/composables/use-state"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest
   languageName: unknown
   linkType: soft
 
-"example-with-wasm@workspace:examples/with-wasm":
+"example-wasm@workspace:examples/experimental/wasm":
   version: 0.0.0-use.local
-  resolution: "example-with-wasm@workspace:examples/with-wasm"
+  resolution: "example-wasm@workspace:examples/experimental/wasm"
   dependencies:
     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     nuxt3: latest