docs: new examples

docs/4.examples/0.basics/_dir.yml

@@ -0,0 +1 @@
+navigation.icon: uil:star

docs/4.examples/0.basics/hello-world.md

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

docs/4.examples/0.essentials/hello-world.md

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

docs/4.examples/1.app/app-config.md

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

docs/4.examples/1.app/error-handling.md

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

docs/4.examples/1.app/plugins.md

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

docs/4.examples/1.app/teleport.md

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

docs/4.examples/2.auto-imports/components.md

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

docs/4.examples/2.auto-imports/composables.md

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

docs/4.examples/2.integrations/1.supabase.md

@@ -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
+
+[![Supabase demo](https://user-images.githubusercontent.com/904724/215534066-6e4b97d2-6ea2-4176-b2ce-d5b1939bfb55.png)](https://n3-supabase.netlify.app/)

docs/4.examples/2.integrations/_dir.yml

@@ -0,0 +1 @@
+navigation.icon: uil:link

docs/4.examples/3.composables/use-async-data.md

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

docs/4.examples/3.composables/use-cookie.md

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

docs/4.examples/3.composables/use-fetch.md

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

docs/4.examples/3.composables/use-head.md

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

docs/4.examples/3.composables/use-state.md

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

docs/4.examples/3.ui/1.daisyui.md

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

docs/4.examples/3.ui/_dir.yml

@@ -0,0 +1,2 @@
+title: UI
+navigation.icon: uil:web-grid

docs/4.examples/4.routing/layouts.md

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

docs/4.examples/4.routing/middleware.md

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

docs/4.examples/4.routing/nuxt-link.md

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

docs/4.examples/4.routing/pages.md

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

docs/4.examples/4.routing/universal-router.md

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

docs/4.examples/5.server/routes.md

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

docs/4.examples/6.advanced/config-extends.md

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

docs/4.examples/6.advanced/jsx.md

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

docs/4.examples/6.advanced/module-extend-pages.md

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

docs/4.examples/6.advanced/testing.md

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

docs/4.examples/7.experimental/reactivity-transform.md

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

docs/4.examples/7.experimental/wasm.md

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

docs/4.examples/8.other/locale.md

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