docs: improve examples content

This commit is contained in:
Sébastien Chopin 2022-11-08 18:03:18 +01:00
parent 8e4068b725
commit 1582f8ec01
25 changed files with 81 additions and 52 deletions

View File

@ -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"}

View File

@ -1,5 +1,5 @@
---
template: Example
toc: false
---
# `app.config`

View File

@ -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"}

View File

@ -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"}

View File

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

View File

@ -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"}
::

View File

@ -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"}
::

View File

@ -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.
::

View File

@ -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"}
::

View File

@ -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.
::

View File

@ -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"}
::

View File

@ -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=👉}

View File

@ -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"}
::

View File

@ -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"}
::

View File

@ -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>`.
::

View File

@ -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"}
::

View File

@ -1,6 +1,4 @@
---
title: "Universal Router"
description: "This example demonstrates Nuxt universal routing utilities without depending on pages/ and vue-router."
toc: false
---

View File

@ -1,6 +1,4 @@
---
title: "Server Routes"
description: "This example shows how to create server routes inside the server/api directory."
toc: false
---

View File

@ -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"}

View File

@ -1,5 +1,5 @@
---
template: Example
toc: false
---
# JSX / TSX

View File

@ -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"}

View File

@ -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).
::

View File

@ -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"}
::

View File

@ -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"}
::

View File

@ -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.
::