mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-24 06:35:10 +00:00
docs: new examples
This commit is contained in:
Sébastien Chopin
parent
5037dd6876
commit
718753c0de
1
docs/4.examples/0.basics/_dir.yml
Normal file
1
docs/4.examples/0.basics/_dir.yml
Normal file
@ -0,0 +1 @@
|
||||
navigation.icon: uil:star
|
||||
11
docs/4.examples/0.basics/hello-world.md
Normal file
11
docs/4.examples/0.basics/hello-world.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Hello World
|
||||
|
||||
A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
|
||||
|
||||
:sandbox{repo="nuxt/examples" branch="main" dir="hello-world" file="app.vue"}
|
||||
|
||||
:demo{src="https://hello-world.example.nuxt.space/"}
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Hello World
|
||||
|
||||
A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
|
||||
|
||||
::ReadMore{link="/docs/getting-started/introduction"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/essentials/hello-world" file="app.vue"}
|
||||
::
|
||||
@ -1,14 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# `app.config`
|
||||
|
||||
> Nuxt 3 provides an app.config config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
|
||||
|
||||
This example shows how to use `app.config` feature.
|
||||
|
||||
::ReadMore{link="/docs/guide/features/app-config"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app-config" file="app.vue"}
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Error Handling
|
||||
|
||||
This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
|
||||
|
||||
::ReadMore{link="/docs/getting-started/error-handling"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/error-handling" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Plugins
|
||||
|
||||
This example shows how to use the plugins/ directory to auto-register plugins.
|
||||
|
||||
:ReadMore{link="/docs/guide/directory-structure/plugins"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/plugins" file="app.vue"}
|
||||
::
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
::ReadMore{link="/docs/api/components/teleports"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/teleport" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# 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="/docs/guide/directory-structure/components"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/auto-imports/components" file="app.vue"}
|
||||
::
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# 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="/docs/guide/directory-structure/composables"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/auto-imports/composables" file="app.vue"}
|
||||
::
|
||||
13
docs/4.examples/2.integrations/1.supabase.md
Normal file
13
docs/4.examples/2.integrations/1.supabase.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Supabase
|
||||
|
||||
A demonstration of [Supabase](https://supabase.com/) integration with Nuxt.
|
||||
|
||||
:sandbox{repo="nuxt-modules/supabase" branch="main" dir="demo" file="app.vue"}
|
||||
|
||||
The demo cannot be emmbedded and is available on https://n3-supabase.netlify.app
|
||||
|
||||
[](https://n3-supabase.netlify.app/)
|
||||
1
docs/4.examples/2.integrations/_dir.yml
Normal file
1
docs/4.examples/2.integrations/_dir.yml
Normal file
@ -0,0 +1 @@
|
||||
navigation.icon: uil:link
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
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.
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/api/composables/use-async-data"}
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-async-data" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
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="/docs/api/composables/use-cookie"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-cookie" file="app.vue"}
|
||||
::
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
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.
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/api/composables/use-fetch"}
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-fetch" file="app.vue"}
|
||||
::
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# 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="/docs/api/composables/use-head"}
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/getting-started/seo-meta"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-head" file="app.vue"}
|
||||
::
|
||||
@ -1,22 +0,0 @@
|
||||
---
|
||||
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=👉}
|
||||
Learn more about [useState](/docs/api/composables/use-state).
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/api/composables/use-state"}
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/getting-started/state-management"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/composables/use-state" file="app.vue"}
|
||||
::
|
||||
11
docs/4.examples/3.ui/1.daisyui.md
Normal file
11
docs/4.examples/3.ui/1.daisyui.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Daisy UI
|
||||
|
||||
A demonstration of [daisyUI](https://daisyui.com/) integration with Nuxt.
|
||||
|
||||
:sandbox{repo="nuxt/examples" branch="main" dir="ui/daisyui" file="app.vue"}
|
||||
|
||||
:demo{src="https://daisyui.example.nuxt.space/"}
|
||||
2
docs/4.examples/3.ui/_dir.yml
Normal file
2
docs/4.examples/3.ui/_dir.yml
Normal file
@ -0,0 +1,2 @@
|
||||
title: UI
|
||||
navigation.icon: uil:web-grid
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Layouts
|
||||
|
||||
This example shows how to define default and custom layouts.
|
||||
|
||||
::ReadMore{link="/docs/guide/directory-structure/layouts"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/layouts" file="pages/index.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
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="/docs/guide/directory-structure/middleware"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/middleware" file="app.vue"}
|
||||
::
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
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>`.
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/api/components/nuxt-link"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/nuxt-link" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Pages
|
||||
|
||||
This example shows how to use the pages/ directory to create application routes.
|
||||
|
||||
::ReadMore{link="/docs/guide/directory-structure/pages"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/pages" file="app.vue"}
|
||||
::
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Universal Router
|
||||
|
||||
This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/universal-router" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Server Routes
|
||||
|
||||
This example shows how to create server routes inside the `server/api` directory.
|
||||
|
||||
::ReadMore{link="/docs/guide/directory-structure/server"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/server/routes" file="app.vue"}
|
||||
::
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
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/nuxt" branch="main" dir="examples/advanced/config-extends" file="nuxt.config.ts"}
|
||||
::
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# JSX / TSX
|
||||
|
||||
This example shows how to use [jsx syntax](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) with typescript in Nuxt pages and components.
|
||||
|
||||
::ReadMore{link="https://vuejs.org/guide/extras/render-function.html#jsx-tsx"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/jsx" file="nuxt.config.ts"}
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Module Extend Pages
|
||||
|
||||
This example defines a new `test` page using `extendPages` within a module.
|
||||
|
||||
::ReadMore{link="/docs/guide/going-further/modules"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/module-extend-pages" file="pages/index.vue"}
|
||||
::
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# Testing
|
||||
|
||||
This example shows how to test your Nuxt application.
|
||||
|
||||
::alert{type=info icon=👉}
|
||||
Learn more about [testing](/docs/guide/going-further/testing).
|
||||
::
|
||||
|
||||
::ReadMore{link="/docs/guide/going-further/testing"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/advanced/testing" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
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"}
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/experimental/reactivity-transform" file="app.vue"}
|
||||
::
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
|
||||
# WASM
|
||||
|
||||
This example demonstrates the server-side support of WebAssembly in Nuxt 3.
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/experimental/wasm" file="app.vue"}
|
||||
::
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
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.
|
||||
::
|
||||
|
||||
::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/other/locale" file="app.vue"}
|
||||
Loading…
Reference in New Issue
Block a user