docs: add app-config example (#7247)

Co-authored-by: Pooya Parsa <[email protected]>

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

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
+})

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>

examples/app-config/nuxt.config.ts

@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})

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

examples/app-config/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}