From 1582f8ec0156bae6dd1afc4503f27e4ce52db537 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 8 Nov 2022 18:03:18 +0100 Subject: [PATCH] docs: improve examples content --- docs/content/4.examples/0.essentials/hello-world.md | 4 ++-- docs/content/4.examples/1.app/app-config.md | 2 +- docs/content/4.examples/1.app/error-handling.md | 4 +--- docs/content/4.examples/1.app/plugins.md | 8 +++++--- docs/content/4.examples/1.app/teleport.md | 6 ++++-- docs/content/4.examples/2.auto-imports/components.md | 6 +++--- docs/content/4.examples/2.auto-imports/composables.md | 8 +++++--- docs/content/4.examples/3.composables/use-async-data.md | 6 ++++-- docs/content/4.examples/3.composables/use-cookie.md | 6 ++++-- docs/content/4.examples/3.composables/use-fetch.md | 6 ++++-- docs/content/4.examples/3.composables/use-head.md | 6 ++++-- docs/content/4.examples/3.composables/use-state.md | 6 ++++-- docs/content/4.examples/4.routing/layouts.md | 6 ++++-- docs/content/4.examples/4.routing/middleware.md | 6 ++++-- docs/content/4.examples/4.routing/nuxt-link.md | 6 ++++-- docs/content/4.examples/4.routing/pages.md | 6 ++++-- docs/content/4.examples/4.routing/universal-router.md | 2 -- docs/content/4.examples/5.server/routes.md | 2 -- docs/content/4.examples/6.advanced/config-extends.md | 6 ++++-- docs/content/4.examples/6.advanced/jsx.md | 2 +- docs/content/4.examples/6.advanced/module-extend-pages.md | 4 ++-- docs/content/4.examples/6.advanced/testing.md | 6 ++++-- .../4.examples/7.experimental/reactivity-transform.md | 6 ++++-- docs/content/4.examples/7.experimental/wasm.md | 6 ++++-- docs/content/4.examples/8.other/locale.md | 7 +++++-- 25 files changed, 81 insertions(+), 52 deletions(-) diff --git a/docs/content/4.examples/0.essentials/hello-world.md b/docs/content/4.examples/0.essentials/hello-world.md index 69586e6201f..c225b96a973 100644 --- 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 index 527ddf5555e..374f381edf9 100644 --- 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 index 9488e6a23b4..c4036f262b8 100644 --- a/docs/content/4.examples/1.app/error-handling.md +++ b/docs/content/4.examples/1.app/error-handling.md @@ -1,6 +1,4 @@ --- -title: "Error Handling" -description: "This example shows how to handle errors in different contexts: pages, plugins, components and middleware." toc: false --- @@ -8,7 +6,7 @@ toc: false 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 index 6f69ab876d0..33176a97012 100644 --- 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 index 274ac11847a..30cd4bd7a8f 100644 --- 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 with client-side and server-side rendering." toc: false --- +# Teleport + +This example shows how to use the with client-side and server-side rendering. + Vue 3 provides the [`` 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 `` 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 index 1f881164df7..991dcb6523c 100644 --- 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 index babd706eb05..a57a47bcdcb 100644 --- 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 index 9a98adc2373..2410b161d16 100644 --- 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 index 8d3ffc8f14e..1598ec1349f 100644 --- 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 index 3bdfede2eb1..acebd0cc444 100644 --- 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 index 6251ed68ca9..e516220a318 100644 --- 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 index 2bbb42ec340..637fff22e4a 100644 --- 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 index fc4c715b918..9f072e4bc58 100644 --- 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 index 863f19edd6a..51365bca169 100644 --- 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 index a4c7f0e5b21..efdb896f751 100644 --- 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: "" -description: "This example shows different ways to use ." toc: false --- +# `` + +This example shows different ways to navigate between page with the `` component. + ::alert{type=info icon=💡} `components/MyNuxtLink.ts` defines a custom ``. :: diff --git a/docs/content/4.examples/4.routing/pages.md b/docs/content/4.examples/4.routing/pages.md index 9276619beaf..f300a8c14c0 100644 --- 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 index 30a85337428..03149de87e6 100644 --- 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 index d2a093ac062..8666e02968d 100644 --- 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 index e8f93e6aa8e..aabd1a742d8 100644 --- 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 index 1139e3fb38c..2c85e32898d 100644 --- 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 index 36bac698203..a36fb41b4ed 100644 --- 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 index 659227d76f9..a5c0eec42de 100644 --- 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 index cdda17773e3..9d22a6738c3 100644 --- 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 index 3607c6ec72f..17272507e88 100644 --- 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 index f21a56fbcec..8c33b8f3465 100644 --- 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. ::