From 94261349dcde8e65e4997a524cbc9d76011454bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Mon, 5 Sep 2022 15:16:30 +0200
Subject: [PATCH] docs: add `app-config` example (#7247)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
---
 docs/content/4.examples/1.app/app-config.md | 14 ++++++++++++++
 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 +++
 6 files changed, 56 insertions(+)
 create mode 100644 docs/content/4.examples/1.app/app-config.md
 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/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"}
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..6bc63d859ba
--- /dev/null
+++ b/examples/app-config/app.vue
@@ -0,0 +1,13 @@
+<script setup>
+const config = useAppConfig()
+</script>
+
+<template>
+  <NuxtExampleLayout example="app-config">
+    <h1>{{ config.title }}</h1>
+    <p>{{ config.description }}</p>
+    <button v-if="config.showButton">
+      I am a button
+    </button>
+  </NuxtExampleLayout>
+</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"
+}