From 285307ff9ec031abac61bca6edafec6b26a7d424 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Mon, 5 Sep 2022 15:10:40 +0200
Subject: [PATCH 1/3] chore(example): add app-config example

---
 examples/app-config/app.config.ts  |  6 ++++++
 examples/app-config/app.vue        | 13 +++++++++++++
 examples/app-config/nuxt.config.ts |  7 +++++++
 examples/app-config/package.json   | 13 +++++++++++++
 examples/app-config/tsconfig.json  |  3 +++
 5 files changed, 42 insertions(+)
 create mode 100644 examples/app-config/app.config.ts
 create mode 100644 examples/app-config/app.vue
 create mode 100644 examples/app-config/nuxt.config.ts
 create mode 100644 examples/app-config/package.json
 create mode 100644 examples/app-config/tsconfig.json

diff --git a/examples/app-config/app.config.ts b/examples/app-config/app.config.ts
new file mode 100644
index 00000000000..ed5df7eb16b
--- /dev/null
+++ b/examples/app-config/app.config.ts
@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  title: 'Hello App Config',
+  description:
+    'This is some content coming from app.config.ts that support HMR, try to update it and see it in action.',
+  showButton: false
+})
diff --git a/examples/app-config/app.vue b/examples/app-config/app.vue
new file mode 100644
index 00000000000..1b061b3802f
--- /dev/null
+++ b/examples/app-config/app.vue
@@ -0,0 +1,13 @@
+<script setup>
+const config = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <h1>{{ config.title }}</h1>
+    <p>{{ config.description }}</p>
+    <button v-if="config.showButton">
+      I am a button
+    </button>
+  </div>
+</template>
diff --git a/examples/app-config/nuxt.config.ts b/examples/app-config/nuxt.config.ts
new file mode 100644
index 00000000000..36c7f84d69b
--- /dev/null
+++ b/examples/app-config/nuxt.config.ts
@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
diff --git a/examples/app-config/package.json b/examples/app-config/package.json
new file mode 100644
index 00000000000..9213b2cc8cb
--- /dev/null
+++ b/examples/app-config/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-app-config",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "^0.2.0",
+    "nuxt": "npm:nuxt3@latest"
+  }
+}
diff --git a/examples/app-config/tsconfig.json b/examples/app-config/tsconfig.json
new file mode 100644
index 00000000000..4b34df1571f
--- /dev/null
+++ b/examples/app-config/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

From a184190de08775d551d3c324ed90de98c519c9bc Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Mon, 5 Sep 2022 15:13:44 +0200
Subject: [PATCH 2/3] use NuxtExampleLayout

---
 examples/app-config/app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/app-config/app.vue b/examples/app-config/app.vue
index 1b061b3802f..6bc63d859ba 100644
--- a/examples/app-config/app.vue
+++ b/examples/app-config/app.vue
@@ -3,11 +3,11 @@ const config = useAppConfig()
 </script>
 
 <template>
-  <div>
+  <NuxtExampleLayout example="app-config">
     <h1>{{ config.title }}</h1>
     <p>{{ config.description }}</p>
     <button v-if="config.showButton">
       I am a button
     </button>
-  </div>
+  </NuxtExampleLayout>
 </template>

From de1955b73572367ca2e96bce6c25d6e03b663904 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Mon, 5 Sep 2022 15:15:48 +0200
Subject: [PATCH 3/3] add docs page

---
 docs/content/4.examples/1.app/app-config.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 docs/content/4.examples/1.app/app-config.md

diff --git a/docs/content/4.examples/1.app/app-config.md b/docs/content/4.examples/1.app/app-config.md
new file mode 100644
index 00000000000..527ddf5555e
--- /dev/null
+++ b/docs/content/4.examples/1.app/app-config.md
@@ -0,0 +1,14 @@
+---
+template: Example
+---
+
+# `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="/guide/features/app-config"}
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/app-config" file="app.vue"}