From 718753c0de76522c70602a6fc83323408f764808 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Mon, 30 Jan 2023 17:37:18 +0100 Subject: [PATCH] docs: new examples --- docs/4.examples/0.basics/_dir.yml | 1 + docs/4.examples/0.basics/hello-world.md | 11 ++++++++++ docs/4.examples/0.essentials/hello-world.md | 13 ----------- docs/4.examples/1.app/app-config.md | 14 ------------ docs/4.examples/1.app/error-handling.md | 13 ----------- docs/4.examples/1.app/plugins.md | 13 ----------- docs/4.examples/1.app/teleport.md | 17 -------------- docs/4.examples/2.auto-imports/components.md | 13 ----------- docs/4.examples/2.auto-imports/composables.md | 15 ------------- docs/4.examples/2.integrations/1.supabase.md | 13 +++++++++++ docs/4.examples/2.integrations/_dir.yml | 1 + .../3.composables/use-async-data.md | 20 ----------------- docs/4.examples/3.composables/use-cookie.md | 13 ----------- docs/4.examples/3.composables/use-fetch.md | 20 ----------------- docs/4.examples/3.composables/use-head.md | 16 -------------- docs/4.examples/3.composables/use-state.md | 22 ------------------- docs/4.examples/3.ui/1.daisyui.md | 11 ++++++++++ docs/4.examples/3.ui/_dir.yml | 2 ++ docs/4.examples/4.routing/layouts.md | 13 ----------- docs/4.examples/4.routing/middleware.md | 13 ----------- docs/4.examples/4.routing/nuxt-link.md | 17 -------------- docs/4.examples/4.routing/pages.md | 13 ----------- docs/4.examples/4.routing/universal-router.md | 10 --------- docs/4.examples/5.server/routes.md | 13 ----------- docs/4.examples/6.advanced/config-extends.md | 12 ---------- docs/4.examples/6.advanced/jsx.md | 12 ---------- .../6.advanced/module-extend-pages.md | 13 ----------- docs/4.examples/6.advanced/testing.md | 17 -------------- .../7.experimental/reactivity-transform.md | 13 ----------- docs/4.examples/7.experimental/wasm.md | 10 --------- docs/4.examples/8.other/locale.md | 13 ----------- 31 files changed, 39 insertions(+), 358 deletions(-) create mode 100644 docs/4.examples/0.basics/_dir.yml create mode 100644 docs/4.examples/0.basics/hello-world.md delete mode 100644 docs/4.examples/0.essentials/hello-world.md delete mode 100644 docs/4.examples/1.app/app-config.md delete mode 100644 docs/4.examples/1.app/error-handling.md delete mode 100644 docs/4.examples/1.app/plugins.md delete mode 100644 docs/4.examples/1.app/teleport.md delete mode 100644 docs/4.examples/2.auto-imports/components.md delete mode 100644 docs/4.examples/2.auto-imports/composables.md create mode 100644 docs/4.examples/2.integrations/1.supabase.md create mode 100644 docs/4.examples/2.integrations/_dir.yml delete mode 100644 docs/4.examples/3.composables/use-async-data.md delete mode 100644 docs/4.examples/3.composables/use-cookie.md delete mode 100644 docs/4.examples/3.composables/use-fetch.md delete mode 100644 docs/4.examples/3.composables/use-head.md delete mode 100644 docs/4.examples/3.composables/use-state.md create mode 100644 docs/4.examples/3.ui/1.daisyui.md create mode 100644 docs/4.examples/3.ui/_dir.yml delete mode 100644 docs/4.examples/4.routing/layouts.md delete mode 100644 docs/4.examples/4.routing/middleware.md delete mode 100644 docs/4.examples/4.routing/nuxt-link.md delete mode 100644 docs/4.examples/4.routing/pages.md delete mode 100644 docs/4.examples/4.routing/universal-router.md delete mode 100644 docs/4.examples/5.server/routes.md delete mode 100644 docs/4.examples/6.advanced/config-extends.md delete mode 100644 docs/4.examples/6.advanced/jsx.md delete mode 100644 docs/4.examples/6.advanced/module-extend-pages.md delete mode 100644 docs/4.examples/6.advanced/testing.md delete mode 100644 docs/4.examples/7.experimental/reactivity-transform.md delete mode 100644 docs/4.examples/7.experimental/wasm.md delete mode 100644 docs/4.examples/8.other/locale.md diff --git a/docs/4.examples/0.basics/_dir.yml b/docs/4.examples/0.basics/_dir.yml new file mode 100644 index 0000000000..fc5b129b39 --- /dev/null +++ b/docs/4.examples/0.basics/_dir.yml @@ -0,0 +1 @@ +navigation.icon: uil:star diff --git a/docs/4.examples/0.basics/hello-world.md b/docs/4.examples/0.basics/hello-world.md new file mode 100644 index 0000000000..ccfbb04937 --- /dev/null +++ b/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/"} diff --git a/docs/4.examples/0.essentials/hello-world.md b/docs/4.examples/0.essentials/hello-world.md deleted file mode 100644 index 15eda0a70b..0000000000 --- a/docs/4.examples/0.essentials/hello-world.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/1.app/app-config.md b/docs/4.examples/1.app/app-config.md deleted file mode 100644 index 70de280e44..0000000000 --- a/docs/4.examples/1.app/app-config.md +++ /dev/null @@ -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"} diff --git a/docs/4.examples/1.app/error-handling.md b/docs/4.examples/1.app/error-handling.md deleted file mode 100644 index 08bdc73e35..0000000000 --- a/docs/4.examples/1.app/error-handling.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/1.app/plugins.md b/docs/4.examples/1.app/plugins.md deleted file mode 100644 index 956f59b963..0000000000 --- a/docs/4.examples/1.app/plugins.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/1.app/teleport.md b/docs/4.examples/1.app/teleport.md deleted file mode 100644 index 9fd4647b84..0000000000 --- a/docs/4.examples/1.app/teleport.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -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. - -::ReadMore{link="/docs/api/components/teleports"} -:: - -::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/app/teleport" file="app.vue"} -:: diff --git a/docs/4.examples/2.auto-imports/components.md b/docs/4.examples/2.auto-imports/components.md deleted file mode 100644 index f9fb58e9a9..0000000000 --- a/docs/4.examples/2.auto-imports/components.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/2.auto-imports/composables.md b/docs/4.examples/2.auto-imports/composables.md deleted file mode 100644 index 4d7ac88dce..0000000000 --- a/docs/4.examples/2.auto-imports/composables.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/2.integrations/1.supabase.md b/docs/4.examples/2.integrations/1.supabase.md new file mode 100644 index 0000000000..6628b90fa4 --- /dev/null +++ b/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/) diff --git a/docs/4.examples/2.integrations/_dir.yml b/docs/4.examples/2.integrations/_dir.yml new file mode 100644 index 0000000000..feb7c7cb5b --- /dev/null +++ b/docs/4.examples/2.integrations/_dir.yml @@ -0,0 +1 @@ +navigation.icon: uil:link diff --git a/docs/4.examples/3.composables/use-async-data.md b/docs/4.examples/3.composables/use-async-data.md deleted file mode 100644 index 96fa445ec2..0000000000 --- a/docs/4.examples/3.composables/use-async-data.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/3.composables/use-cookie.md b/docs/4.examples/3.composables/use-cookie.md deleted file mode 100644 index 4469b87996..0000000000 --- a/docs/4.examples/3.composables/use-cookie.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/3.composables/use-fetch.md b/docs/4.examples/3.composables/use-fetch.md deleted file mode 100644 index 4800accbd6..0000000000 --- a/docs/4.examples/3.composables/use-fetch.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/3.composables/use-head.md b/docs/4.examples/3.composables/use-head.md deleted file mode 100644 index 05ad9d50da..0000000000 --- a/docs/4.examples/3.composables/use-head.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/3.composables/use-state.md b/docs/4.examples/3.composables/use-state.md deleted file mode 100644 index c78a05bfbf..0000000000 --- a/docs/4.examples/3.composables/use-state.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/3.ui/1.daisyui.md b/docs/4.examples/3.ui/1.daisyui.md new file mode 100644 index 0000000000..7b199355e2 --- /dev/null +++ b/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/"} diff --git a/docs/4.examples/3.ui/_dir.yml b/docs/4.examples/3.ui/_dir.yml new file mode 100644 index 0000000000..9171afca7b --- /dev/null +++ b/docs/4.examples/3.ui/_dir.yml @@ -0,0 +1,2 @@ +title: UI +navigation.icon: uil:web-grid diff --git a/docs/4.examples/4.routing/layouts.md b/docs/4.examples/4.routing/layouts.md deleted file mode 100644 index a827569eae..0000000000 --- a/docs/4.examples/4.routing/layouts.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/4.routing/middleware.md b/docs/4.examples/4.routing/middleware.md deleted file mode 100644 index 4dc925693a..0000000000 --- a/docs/4.examples/4.routing/middleware.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/4.routing/nuxt-link.md b/docs/4.examples/4.routing/nuxt-link.md deleted file mode 100644 index 51ca7fb81b..0000000000 --- a/docs/4.examples/4.routing/nuxt-link.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -toc: false ---- - -# `` - -This example shows different ways to navigate between page with the `` component. - -::alert{type=info icon=💡} -`components/MyNuxtLink.ts` defines a custom ``. -:: - -::ReadMore{link="/docs/api/components/nuxt-link"} -:: - -::sandbox{repo="nuxt/nuxt" branch="main" dir="examples/routing/nuxt-link" file="app.vue"} -:: diff --git a/docs/4.examples/4.routing/pages.md b/docs/4.examples/4.routing/pages.md deleted file mode 100644 index 3d715f32ef..0000000000 --- a/docs/4.examples/4.routing/pages.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/4.routing/universal-router.md b/docs/4.examples/4.routing/universal-router.md deleted file mode 100644 index 37f5d5ae71..0000000000 --- a/docs/4.examples/4.routing/universal-router.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/5.server/routes.md b/docs/4.examples/5.server/routes.md deleted file mode 100644 index 41b9a73cc2..0000000000 --- a/docs/4.examples/5.server/routes.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/6.advanced/config-extends.md b/docs/4.examples/6.advanced/config-extends.md deleted file mode 100644 index 0666f2ac5a..0000000000 --- a/docs/4.examples/6.advanced/config-extends.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/6.advanced/jsx.md b/docs/4.examples/6.advanced/jsx.md deleted file mode 100644 index 06eea3aac2..0000000000 --- a/docs/4.examples/6.advanced/jsx.md +++ /dev/null @@ -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"} diff --git a/docs/4.examples/6.advanced/module-extend-pages.md b/docs/4.examples/6.advanced/module-extend-pages.md deleted file mode 100644 index 1d81488bd1..0000000000 --- a/docs/4.examples/6.advanced/module-extend-pages.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/6.advanced/testing.md b/docs/4.examples/6.advanced/testing.md deleted file mode 100644 index 78de9c245b..0000000000 --- a/docs/4.examples/6.advanced/testing.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/7.experimental/reactivity-transform.md b/docs/4.examples/7.experimental/reactivity-transform.md deleted file mode 100644 index 3fb91a94af..0000000000 --- a/docs/4.examples/7.experimental/reactivity-transform.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/7.experimental/wasm.md b/docs/4.examples/7.experimental/wasm.md deleted file mode 100644 index 728bcb955d..0000000000 --- a/docs/4.examples/7.experimental/wasm.md +++ /dev/null @@ -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"} -:: diff --git a/docs/4.examples/8.other/locale.md b/docs/4.examples/8.other/locale.md deleted file mode 100644 index 7834d311a8..0000000000 --- a/docs/4.examples/8.other/locale.md +++ /dev/null @@ -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"}