From c94d0766034933f36485e4624e33f7398f3ae5d9 Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Mon, 18 Dec 2023 20:30:54 -0700
Subject: [PATCH] chore: rename NuxtExampleLayout to NuxtExample

---
 examples/advanced/config-extends/pages/index.vue             | 4 ++--
 examples/advanced/error-handling/app.vue                     | 4 ++--
 examples/advanced/error-handling/error.vue                   | 4 ++--
 examples/advanced/jsx/app.vue                                | 4 ++--
 examples/advanced/locale/app.vue                             | 4 ++--
 examples/advanced/module-extend-pages/layouts/default.vue    | 4 ++--
 examples/advanced/teleport/app.vue                           | 4 ++--
 examples/advanced/testing/app.vue                            | 4 ++--
 examples/advanced/use-cookie/app.vue                         | 4 ++--
 examples/advanced/use-custom-fetch-composable/app.vue        | 4 ++--
 examples/auth/local/app.vue                                  | 4 ++--
 examples/experimental/wasm/app.vue                           | 4 ++--
 examples/features/auto-imports/app.vue                       | 4 ++--
 examples/features/data-fetching/app.vue                      | 4 ++--
 examples/features/layouts/app.vue                            | 4 ++--
 examples/features/meta-tags/app.vue                          | 4 ++--
 examples/features/state-management/app.vue                   | 4 ++--
 examples/routing/middleware/app.vue                          | 4 ++--
 examples/routing/pages/app.vue                               | 4 ++--
 examples/routing/universal-router/app.vue                    | 4 ++--
 examples/ui/sass/app.vue                                     | 4 ++--
 shared/components/{NuxtExampleLayout.vue => NuxtExample.vue} | 0
 shared/package.json                                          | 5 +++--
 shared/tsconfig.json                                         | 3 +++
 24 files changed, 48 insertions(+), 44 deletions(-)
 rename shared/components/{NuxtExampleLayout.vue => NuxtExample.vue} (100%)
 create mode 100644 shared/tsconfig.json

diff --git a/examples/advanced/config-extends/pages/index.vue b/examples/advanced/config-extends/pages/index.vue
index 9b1e568b..843644ec 100644
--- a/examples/advanced/config-extends/pages/index.vue
+++ b/examples/advanced/config-extends/pages/index.vue
@@ -6,7 +6,7 @@ const bar = getBar()
 </script>
 
 <template>
-  <NuxtExampleLayout dir="advanced/config-extends" file="nuxt.config.ts">
+  <NuxtExample dir="advanced/config-extends" file="nuxt.config.ts">
     appConfig:
     <pre>{{ JSON.stringify(appConfig, null, 2) }}</pre>
     runtimeConfig:
@@ -20,5 +20,5 @@ const bar = getBar()
     {{ foo }} {{ bar }}
     <br>
     {{ $myPlugin() }}
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/error-handling/app.vue b/examples/advanced/error-handling/app.vue
index 5f620802..b49a67f2 100644
--- a/examples/advanced/error-handling/app.vue
+++ b/examples/advanced/error-handling/app.vue
@@ -15,7 +15,7 @@ function triggerError() {
 </script>
 
 <template>
-  <NuxtExampleLayout dir="advanced/error-handling" current-route>
+  <NuxtExample dir="advanced/error-handling" current-route>
     <template #nav>
       <NuxtLink to="/" class="n-link-base">
         Home
@@ -37,5 +37,5 @@ function triggerError() {
       </button>
     </template>
     <NuxtPage />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/error-handling/error.vue b/examples/advanced/error-handling/error.vue
index 2cd8a688..41df90fc 100644
--- a/examples/advanced/error-handling/error.vue
+++ b/examples/advanced/error-handling/error.vue
@@ -9,7 +9,7 @@ function handleError() {
 </script>
 
 <template>
-  <NuxtExampleLayout>
+  <NuxtExample>
     <div class="relative font-sans">
       <div class="container max-w-200 mx-auto py-10 px-4">
         <h1>{{ error?.message }}</h1>
@@ -29,5 +29,5 @@ function handleError() {
         </NuxtLink>
       </div>
     </div>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/jsx/app.vue b/examples/advanced/jsx/app.vue
index 8adf3f0f..9819d97b 100644
--- a/examples/advanced/jsx/app.vue
+++ b/examples/advanced/jsx/app.vue
@@ -18,9 +18,9 @@ const InlineComponent = () => (
 </script>
 
 <template>
-  <NuxtExampleLayout dir="advanced/jsx" icon="i-simple-icons-react">
+  <NuxtExample dir="advanced/jsx" icon="i-simple-icons-react">
     <InlineComponent />
     <!-- Defined in components/jsx-component.ts -->
     <MyComponent message="This is an external JSX component" />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/locale/app.vue b/examples/advanced/locale/app.vue
index ae6ff066..d4cca1f7 100644
--- a/examples/advanced/locale/app.vue
+++ b/examples/advanced/locale/app.vue
@@ -6,12 +6,12 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
 </script>
 
 <template>
-  <NuxtExampleLayout dir="advanced/locale">
+  <NuxtExample dir="advanced/locale">
     <div class="flex justify-center gap-8 items-center mt-2">
       <USelect v-model="locale" :options="locales" icon="i-heroicons-calendar-days" />
       <p class="text-4xl">
         {{ date }}
       </p>
     </div>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/module-extend-pages/layouts/default.vue b/examples/advanced/module-extend-pages/layouts/default.vue
index de038427..1395fe37 100644
--- a/examples/advanced/module-extend-pages/layouts/default.vue
+++ b/examples/advanced/module-extend-pages/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtExampleLayout dir="advanced/module-extend-pages" file="pages/index.vue">
+  <NuxtExample dir="advanced/module-extend-pages" file="pages/index.vue">
     <slot />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/teleport/app.vue b/examples/advanced/teleport/app.vue
index ef99ee6d..52b86c3d 100644
--- a/examples/advanced/teleport/app.vue
+++ b/examples/advanced/teleport/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtExampleLayout dir="advanced/teleport">
+  <NuxtExample dir="advanced/teleport">
     <div>
       <!-- SSR Teleport -->
       <Teleport to="body">
@@ -22,5 +22,5 @@
         Hello from Modal teleport!
       </MyModal>
     </div>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/testing/app.vue b/examples/advanced/testing/app.vue
index 12f9cc0c..e179d3de 100644
--- a/examples/advanced/testing/app.vue
+++ b/examples/advanced/testing/app.vue
@@ -1,7 +1,7 @@
 <template>
-  <NuxtExampleLayout dir="advanced/testing">
+  <NuxtExample dir="advanced/testing">
     <div class="text-7xl">
       Hello Nuxt!
     </div>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/use-cookie/app.vue b/examples/advanced/use-cookie/app.vue
index 5d47a1f3..63535e76 100644
--- a/examples/advanced/use-cookie/app.vue
+++ b/examples/advanced/use-cookie/app.vue
@@ -15,7 +15,7 @@ const logout = () => {
 </script>
 
 <template>
-  <NuxtExampleLayout class="h-50" dir="advanced/use-cookie">
+  <NuxtExample class="h-50" dir="advanced/use-cookie">
     <template v-if="user">
       <h1 class="text-3xl mb-3">
         Welcome, {{ user.name }}! 👋
@@ -48,5 +48,5 @@ const logout = () => {
         </UButton>
       </div>
     </template>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/advanced/use-custom-fetch-composable/app.vue b/examples/advanced/use-custom-fetch-composable/app.vue
index ad3faf40..c75a1c91 100644
--- a/examples/advanced/use-custom-fetch-composable/app.vue
+++ b/examples/advanced/use-custom-fetch-composable/app.vue
@@ -4,12 +4,12 @@ const { data } = await useCustomFetch<[]>('/contributors')
 </script>
 
 <template>
-  <NuxtExampleLayout dir="advanced/use-custom-fetch-composable" file="composables/useCustomFetch.ts">
+  <NuxtExample dir="advanced/use-custom-fetch-composable" file="composables/useCustomFetch.ts">
     <h1 class="text-xl">
       - Nuxt custom fetch:
     </h1>
     <div class="max-h-96 overflow-auto mt-4 p-4 border border-gray-200 dark:border-gray-800 rounded-lg">
       <pre class="text-left text-xs">{{ data }}</pre>
     </div>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/auth/local/app.vue b/examples/auth/local/app.vue
index 14366cb8..fa88177a 100644
--- a/examples/auth/local/app.vue
+++ b/examples/auth/local/app.vue
@@ -5,7 +5,7 @@ const icon = computed(() => $auth.session.value?.email ? 'i-heroicons-lock-open'
 </script>
 
 <template>
-    <NuxtExampleLayout dir="auth/local" :icon="icon">
+    <NuxtExample dir="auth/local" :icon="icon">
     <template #nav>
       <NuxtLink to="/">Home</NuxtLink>
       <NuxtLink to="/secret">Secret</NuxtLink>
@@ -15,5 +15,5 @@ const icon = computed(() => $auth.session.value?.email ? 'i-heroicons-lock-open'
     <NuxtPage />
     <!-- to show toasts -->
     <UNotifications />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/experimental/wasm/app.vue b/examples/experimental/wasm/app.vue
index 9be384eb..4b270213 100644
--- a/examples/experimental/wasm/app.vue
+++ b/examples/experimental/wasm/app.vue
@@ -8,7 +8,7 @@ const { data } = await useAsyncData(
 </script>
 
 <template>
-  <NuxtExampleLayout dir="experimental/wasm">
+  <NuxtExample dir="experimental/wasm">
     <p>
       <code>a = {{ a }}</code>
     </p>
@@ -20,5 +20,5 @@ const { data } = await useAsyncData(
       <br>
       <code>{{ a }} + {{ b }} = {{ data.sum }}</code>
     </p>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/features/auto-imports/app.vue b/examples/features/auto-imports/app.vue
index 0331b537..f688d084 100644
--- a/examples/features/auto-imports/app.vue
+++ b/examples/features/auto-imports/app.vue
@@ -7,11 +7,11 @@ function hello () {
 </script>
 
 <template>
-  <NuxtExampleLayout dir="features/auto-imports">
+  <NuxtExample dir="features/auto-imports">
     <h1>Demo with auto imports</h1>
     <form class="flex gap-2" @submit.prevent="hello">
       <CustomInput v-model="message" />
       <UButton type="submit">Hello</UButton>
     </form>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/features/data-fetching/app.vue b/examples/features/data-fetching/app.vue
index 6242870f..f8647d7d 100644
--- a/examples/features/data-fetching/app.vue
+++ b/examples/features/data-fetching/app.vue
@@ -16,9 +16,9 @@ const nav = [
 </script>
 
 <template>
-  <NuxtExampleLayout dir="features/data-fetching" :nav="nav">
+  <NuxtExample dir="features/data-fetching" :nav="nav">
     <!-- Show Nuxt progress indicator on page change -->
     <NuxtLoadingIndicator />
     <NuxtPage />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/features/layouts/app.vue b/examples/features/layouts/app.vue
index ebf50bac..777d517a 100644
--- a/examples/features/layouts/app.vue
+++ b/examples/features/layouts/app.vue
@@ -9,7 +9,7 @@ const nav = [
 
 
 <template>
-  <NuxtExampleLayout dir="features/layouts" :nav="nav">
+  <NuxtExample dir="features/layouts" :nav="nav">
     <NuxtLayout class="layouts">
       <NuxtPage />
     </NuxtLayout>
@@ -27,7 +27,7 @@ const nav = [
         Remove layout
       </UButton>
     </div>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
 
 <style scoped>
diff --git a/examples/features/meta-tags/app.vue b/examples/features/meta-tags/app.vue
index 1b87b2d0..27cfc855 100644
--- a/examples/features/meta-tags/app.vue
+++ b/examples/features/meta-tags/app.vue
@@ -5,7 +5,7 @@ useHead({
 </script>
 
 <template>
-  <NuxtExampleLayout dir="features/meta-tags" file="pages/index.vue">
+  <NuxtExample dir="features/meta-tags" file="pages/index.vue">
     <NuxtPage />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/features/state-management/app.vue b/examples/features/state-management/app.vue
index be9f78d3..fd73f1df 100644
--- a/examples/features/state-management/app.vue
+++ b/examples/features/state-management/app.vue
@@ -4,12 +4,12 @@ const sameCounter = useState('counter')
 </script>
 
 <template>
-  <NuxtExampleLayout dir="features/state-management">
+  <NuxtExample dir="features/state-management">
     <p>Counter: {{ counter }}</p>
     <div class="flex gap-2 my-4">
       <UButton @click="counter--">-</UButton>
       <UButton @click="counter++">+</UButton>
     </div>
     <p>Same Counter: {{ sameCounter }}</p>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/routing/middleware/app.vue b/examples/routing/middleware/app.vue
index 84f9f1e8..f9e2b403 100644
--- a/examples/routing/middleware/app.vue
+++ b/examples/routing/middleware/app.vue
@@ -9,12 +9,12 @@ const route = useRoute()
 </script>
 
 <template>
-  <NuxtExampleLayout dir="routing/middleware" :nav="nav">
+  <NuxtExample dir="routing/middleware" :nav="nav">
     <NuxtPage />
     <template #footer>
       <div class="text-center p-4 op-50">
         Current route: <UKbd>{{ route.path }}</UKbd>
       </div>
     </template>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/routing/pages/app.vue b/examples/routing/pages/app.vue
index 4ec8b941..00ceb73e 100644
--- a/examples/routing/pages/app.vue
+++ b/examples/routing/pages/app.vue
@@ -12,8 +12,8 @@ const nav = [
 </script>
 
 <template>
-  <NuxtExampleLayout dir="routing/pages" :nav="nav" current-route>
+  <NuxtExample dir="routing/pages" :nav="nav" current-route>
     <NuxtLoadingIndicator />
     <NuxtPage />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/routing/universal-router/app.vue b/examples/routing/universal-router/app.vue
index 7b1316b3..dc780733 100644
--- a/examples/routing/universal-router/app.vue
+++ b/examples/routing/universal-router/app.vue
@@ -3,7 +3,7 @@ const timer = useState('timer', () => 0)
 </script>
 
 <template>
-  <NuxtExampleLayout dir="routing/universal-router" current-route>
+  <NuxtExample dir="routing/universal-router" current-route>
     A page...
     <br>
 
@@ -29,5 +29,5 @@ const timer = useState('timer', () => 0)
         </template>
       </NuxtLink>
     </template>
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
diff --git a/examples/ui/sass/app.vue b/examples/ui/sass/app.vue
index 2f52e056..7708a424 100644
--- a/examples/ui/sass/app.vue
+++ b/examples/ui/sass/app.vue
@@ -1,10 +1,10 @@
 <template>
-  <NuxtExampleLayout>
+  <NuxtExample>
     <Head>
       <Title>Nuxt with SASS</Title>
     </Head>
     <NuxtPage />
-  </NuxtExampleLayout>
+  </NuxtExample>
 </template>
 
 <style lang="sass">
diff --git a/shared/components/NuxtExampleLayout.vue b/shared/components/NuxtExample.vue
similarity index 100%
rename from shared/components/NuxtExampleLayout.vue
rename to shared/components/NuxtExample.vue
diff --git a/shared/package.json b/shared/package.json
index 22dffdb0..efaad6b3 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -1,11 +1,12 @@
 {
   "name": "@nuxt/examples-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "nuxi preview"
+    "start": "nuxi preview",
+    "prepare": "nuxi prepare"
   },
   "main": "./nuxt.config.ts",
   "files": [
diff --git a/shared/tsconfig.json b/shared/tsconfig.json
new file mode 100644
index 00000000..4b34df15
--- /dev/null
+++ b/shared/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}