mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: improve examples content
This commit is contained in:
parent
8e4068b725
commit
1582f8ec01
@ -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"}
|
||||
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
template: Example
|
||||
toc: false
|
||||
---
|
||||
|
||||
# `app.config`
|
||||
|
@ -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"}
|
||||
|
@ -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"}
|
||||
|
@ -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.
|
||||
|
@ -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"}
|
||||
::
|
||||
|
@ -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"}
|
||||
::
|
||||
|
@ -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.
|
||||
::
|
||||
|
@ -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"}
|
||||
::
|
||||
|
||||
|
@ -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.
|
||||
::
|
||||
|
@ -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"}
|
||||
::
|
||||
|
||||
|
@ -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=👉}
|
||||
|
@ -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"}
|
||||
::
|
||||
|
||||
|
@ -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"}
|
||||
::
|
||||
|
||||
|
@ -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>`.
|
||||
::
|
||||
|
@ -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"}
|
||||
::
|
||||
|
||||
|
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: "Universal Router"
|
||||
description: "This example demonstrates Nuxt universal routing utilities without depending on pages/ and vue-router."
|
||||
toc: false
|
||||
---
|
||||
|
||||
|
@ -1,6 +1,4 @@
|
||||
---
|
||||
title: "Server Routes"
|
||||
description: "This example shows how to create server routes inside the server/api directory."
|
||||
toc: false
|
||||
---
|
||||
|
||||
|
@ -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"}
|
||||
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
template: Example
|
||||
toc: false
|
||||
---
|
||||
|
||||
# JSX / TSX
|
||||
|
@ -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"}
|
||||
|
@ -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).
|
||||
::
|
||||
|
@ -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"}
|
||||
::
|
||||
|
||||
|
@ -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"}
|
||||
::
|
||||
|
@ -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.
|
||||
::
|
||||
|
Loading…
Reference in New Issue
Block a user