docs: improve examples content

nuxt · Nov 8, 2022 · 1582f8e · 1582f8e
1 parent 8e4068b
commit 1582f8e
Show file tree

Hide file tree

Showing 25 changed files with 81 additions and 52 deletions.
diff --git a/docs/content/4.examples/0.essentials/hello-world.md b/docs/content/4.examples/0.essentials/hello-world.md
@@ -1,9 +1,9 @@
 ---
-title: "Hello World"
-description: "A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files."
 toc: false
 ---
 
+# Hello World
+
 A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
 
 ::ReadMore{link="/getting-started/introduction"}

diff --git a/docs/content/4.examples/1.app/app-config.md b/docs/content/4.examples/1.app/app-config.md
@@ -1,5 +1,5 @@
 ---
-template: Example
+toc: false
 ---
 
 # `app.config`

diff --git a/docs/content/4.examples/1.app/error-handling.md b/docs/content/4.examples/1.app/error-handling.md
@@ -1,14 +1,12 @@
 ---
-title: "Error Handling"
-description: "This example shows how to handle errors in different contexts: pages, plugins, components and middleware."
 toc: false
 ---
 
 # Error Handling
 
 This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
 
-::ReadMore{link="/getting-started/error-handling"}
+:ReadMore{link="/getting-started/error-handling"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/error-handling" file="app.vue"}

diff --git a/docs/content/4.examples/1.app/plugins.md b/docs/content/4.examples/1.app/plugins.md
@@ -1,10 +1,12 @@
 ---
-title: "Plugins"
-description: "This example shows how to use the plugins/ directory to auto-register plugins."
 toc: false
 ---
 
-::ReadMore{link="/guide/directory-structure/plugins"}
+# Plugins
+
+This example shows how to use the plugins/ directory to auto-register plugins.
+
+:ReadMore{link="/guide/directory-structure/plugins"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/plugins" file="app.vue"}

diff --git a/docs/content/4.examples/1.app/teleport.md b/docs/content/4.examples/1.app/teleport.md
@@ -1,9 +1,11 @@
 ---
-title: "Teleport"
-description: "This example shows how to use the <Teleport> with client-side and server-side rendering."
 toc: false
 ---
 
+# Teleport
+
+This example shows how to use the <Teleport> with client-side and server-side rendering.
+
 Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/teleport.html) which allows content to be rendered elsewhere in the DOM, outside of the Vue application.
 
 This example shows how to use the `<Teleport>` with client-side and server-side rendering.

diff --git a/docs/content/4.examples/2.auto-imports/components.md b/docs/content/4.examples/2.auto-imports/components.md
@@ -1,10 +1,10 @@
 ---
-title: "Components"
-description: "You can configure other directories to support components auto-imports."
 toc: false
 ---
 
-Components in the `components/` directory are auto-imported and can be used directly in your templates.
+# Components
+
+Components in the `components/` directory are auto-imported and can be used directly in your templates. You can configure other directories to support components auto-imports.
 
 ::ReadMore{link="/guide/directory-structure/components"}
 ::

diff --git a/docs/content/4.examples/2.auto-imports/composables.md b/docs/content/4.examples/2.auto-imports/composables.md
@@ -1,10 +1,12 @@
 ---
-title: "Composables"
-description: "This example shows how to use the composables/ directory to auto-import composables."
 toc: false
 ---
 
-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.
+# Composables
+
+This example shows how to use the composables/ directory to auto-import composables.
+
+If the composable 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.
 
 ::ReadMore{link="/guide/directory-structure/composables"}
 ::

diff --git a/docs/content/4.examples/3.composables/use-async-data.md b/docs/content/4.examples/3.composables/use-async-data.md
@@ -1,9 +1,11 @@
 ---
-title: "useAsyncData"
-description: "This example shows how to use useAsyncData to fetch data from an API endpoint."
 toc: false
 ---
 
+# 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.
 ::

diff --git a/docs/content/4.examples/3.composables/use-cookie.md b/docs/content/4.examples/3.composables/use-cookie.md
@@ -1,9 +1,11 @@
 ---
-title: "useCookie"
-description: "This example shows how to use the useCookie API to persist small amounts of data that both client and server can use."
 toc: false
 ---
 
+# useCookie
+
+This example shows how to use the useCookie API to persist small amounts of data that both client and server can use.
+
 ::ReadMore{link="/api/composables/use-cookie"}
 ::
 

diff --git a/docs/content/4.examples/3.composables/use-fetch.md b/docs/content/4.examples/3.composables/use-fetch.md
@@ -1,9 +1,11 @@
 ---
-title: "useFetch"
-description: "This example shows how to use useFetch to fetch data from an API endpoint."
 toc: false
 ---
 
+# 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.
 ::

diff --git a/docs/content/4.examples/3.composables/use-head.md b/docs/content/4.examples/3.composables/use-head.md
@@ -1,9 +1,11 @@
 ---
 toc: false
-description: "This example shows how to use useHead and Nuxt built-in components to bind meta data to the head of the page."
-title: "useHead"
 ---
 
+# useHead
+
+This example shows how to use useHead and Nuxt built-in components to bind meta data to the head of the page.
+
 ::ReadMore{link="/api/composables/use-head"}
 ::
 

diff --git a/docs/content/4.examples/3.composables/use-state.md b/docs/content/4.examples/3.composables/use-state.md
@@ -1,9 +1,11 @@
 ---
-title: "useState"
-description: "useState is an SSR-friendly ref replacement."
 toc: false
 ---
 
+# useState
+
+This example showcase the `useState` composable, 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=👉}

diff --git a/docs/content/4.examples/4.routing/layouts.md b/docs/content/4.examples/4.routing/layouts.md
@@ -1,9 +1,11 @@
 ---
-title: "Layouts"
-description: "This example shows how to define default and custom layouts."
 toc: false
 ---
 
+# Layouts
+
+This example shows how to define default and custom layouts.
+
 ::ReadMore{link="/guide/directory-structure/layouts"}
 ::
 

diff --git a/docs/content/4.examples/4.routing/middleware.md b/docs/content/4.examples/4.routing/middleware.md
@@ -1,9 +1,11 @@
 ---
-title: "Middleware"
-description: "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."
 toc: false
 ---
 
+# 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.
+
 ::ReadMore{link="/guide/directory-structure/middleware"}
 ::
 

diff --git a/docs/content/4.examples/4.routing/nuxt-link.md b/docs/content/4.examples/4.routing/nuxt-link.md
@@ -1,9 +1,11 @@
 ---
-title: "<NuxtLink>"
-description: "This example shows different ways to use <NuxtLink>."
 toc: false
 ---
 
+# `<NuxtLink>`
+
+This example shows different ways to navigate between page with the `<NuxtLink>` component.
+
 ::alert{type=info icon=💡}
 `components/MyNuxtLink.ts` defines a custom `<NuxtLink>`.
 ::

diff --git a/docs/content/4.examples/4.routing/pages.md b/docs/content/4.examples/4.routing/pages.md
@@ -1,9 +1,11 @@
 ---
-title: "Pages"
-description: "This example shows how to use the pages/ directory to create application routes."
 toc: false
 ---
 
+# Pages
+
+This example shows how to use the pages/ directory to create application routes.
+
 ::ReadMore{link="/guide/directory-structure/pages"}
 ::
 

diff --git a/docs/content/4.examples/4.routing/universal-router.md b/docs/content/4.examples/4.routing/universal-router.md
@@ -1,6 +1,4 @@
 ---
-title: "Universal Router"
-description: "This example demonstrates Nuxt universal routing utilities without depending on pages/ and vue-router."
 toc: false
 ---
 

diff --git a/docs/content/4.examples/5.server/routes.md b/docs/content/4.examples/5.server/routes.md
@@ -1,6 +1,4 @@
 ---
-title: "Server Routes"
-description: "This example shows how to create server routes inside the server/api directory."
 toc: false
 ---
 

diff --git a/docs/content/4.examples/6.advanced/config-extends.md b/docs/content/4.examples/6.advanced/config-extends.md
@@ -1,9 +1,11 @@
 ---
-title: "Config Extends"
-description: "This example shows how to use the extends key in nuxt.config.ts."
 toc: false
 ---
 
+# Config Extends
+
+This example shows how to use the extends key in `nuxt.config.ts`.
+
 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/6.advanced/jsx.md b/docs/content/4.examples/6.advanced/jsx.md
@@ -1,5 +1,5 @@
 ---
-template: Example
+toc: false
 ---
 
 # JSX / TSX

diff --git a/docs/content/4.examples/6.advanced/module-extend-pages.md b/docs/content/4.examples/6.advanced/module-extend-pages.md
@@ -1,9 +1,9 @@
 ---
-title: "Module Extend Pages"
-description: "This example defines a new test page using extendPages within a module."
 toc: false
 ---
 
+# Module Extend Pages
+
 This example defines a new `test` page using `extendPages` within a module.
 
 ::ReadMore{link="/guide/going-further/modules"}

diff --git a/docs/content/4.examples/6.advanced/testing.md b/docs/content/4.examples/6.advanced/testing.md
@@ -1,9 +1,11 @@
 ---
-title: "Testing"
-description: "This example shows how to test your Nuxt application."
 toc: false
 ---
 
+# Testing
+
+This example shows how to test your Nuxt application.
+
 ::alert{type=info icon=👉}
 Learn more about [testing](/guide/going-further/testing).
 ::

diff --git a/docs/content/4.examples/7.experimental/reactivity-transform.md b/docs/content/4.examples/7.experimental/reactivity-transform.md
@@ -1,9 +1,11 @@
 ---
-title: "Reactivity Transform"
-description: "This example demonstrates the support of Reactivity Transform in Nuxt 3."
 toc: false
 ---
 
+# Reactivity Transform
+
+This example demonstrates the support of Reactivity Transform in Nuxt 3.
+
 ::ReadMore{link="https://vuejs.org/guide/extras/reactivity-transform.html" title="Reactivity Transform"}
 ::
 

diff --git a/docs/content/4.examples/7.experimental/wasm.md b/docs/content/4.examples/7.experimental/wasm.md
@@ -1,8 +1,10 @@
 ---
-title: "WASM"
-description: "This example demonstrates the server-side support of WebAssembly in Nuxt 3."
 toc: false
 ---
 
+# 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/8.other/locale.md b/docs/content/4.examples/8.other/locale.md
@@ -1,8 +1,11 @@
 ---
-title: "Locale"
-description: "This example shows how to define a locale composable to handle the application's locale, both server and client side."
+toc: false
 ---
 
+# 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 the visitor's locale.
 ::