From 498ef2b920ae45ca3078aa681471e7278b181c99 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Wed, 1 May 2024 16:56:31 +0800
Subject: [PATCH 1/2] feat: add option to use NuxtLayout in stories

---
 examples/showcase/layouts/custom.vue          | 28 +++++++++++++++++++
 .../showcase/pages/CustomLayout.stories.ts    | 24 ++++++++++++++++
 examples/showcase/pages/CustomLayout.vue      |  9 ++++++
 3 files changed, 61 insertions(+)
 create mode 100644 examples/showcase/layouts/custom.vue
 create mode 100644 examples/showcase/pages/CustomLayout.stories.ts
 create mode 100644 examples/showcase/pages/CustomLayout.vue

diff --git a/examples/showcase/layouts/custom.vue b/examples/showcase/layouts/custom.vue
new file mode 100644
index 00000000..112ce9b2
--- /dev/null
+++ b/examples/showcase/layouts/custom.vue
@@ -0,0 +1,28 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="custom">
+    <slot name="header">
+      <p>
+        <i>Default #header slot content for <code>layouts/custom.vue</code></i>
+      </p>
+    </slot>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.custom {
+  border: 1px solid #a795ec;
+  padding: 1rem;
+  position: relative;
+  background-color: #a795ec87;
+}
+.custom::before {
+  content: 'layouts/custom.vue';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  color: #583ccb;
+  font-family: monospace;
+}
+</style>
diff --git a/examples/showcase/pages/CustomLayout.stories.ts b/examples/showcase/pages/CustomLayout.stories.ts
new file mode 100644
index 00000000..e06a1f5f
--- /dev/null
+++ b/examples/showcase/pages/CustomLayout.stories.ts
@@ -0,0 +1,24 @@
+import CustomLayoutPage from './HelloWorld.vue'
+import { NuxtLayout } from '#components'
+import { provide } from 'vue'
+import { PageRouteSymbol } from '#app/components/injections'
+import { useRoute } from '#app/composables/router'
+
+const meta = {
+  title: 'Features/Pages as Stories with custom layout',
+  component: CustomLayoutPage,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const CustomLayoutStory = {
+  args: {},
+  render: () => ({
+    components: { CustomLayoutPage, NuxtLayout },
+    setup() {
+      provide(PageRouteSymbol, useRoute())
+    },
+    template: '<NuxtLayout><CustomLayoutPage /></NuxtLayout>',
+  }),
+}
diff --git a/examples/showcase/pages/CustomLayout.vue b/examples/showcase/pages/CustomLayout.vue
new file mode 100644
index 00000000..f2fd1140
--- /dev/null
+++ b/examples/showcase/pages/CustomLayout.vue
@@ -0,0 +1,9 @@
+<script setup>
+definePageMeta({
+  layout: 'custom',
+})
+</script>
+
+<template>
+  <div>Custom layout defined with <code>definePageMeta</code></div>
+</template>

From b4cfd7e87e33f9bade706724c90f38bd59dd400f Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Sun, 30 Jun 2024 16:28:34 +0200
Subject: [PATCH 2/2] use correct layout

---
 examples/showcase/pages/CustomLayout.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/showcase/pages/CustomLayout.stories.ts b/examples/showcase/pages/CustomLayout.stories.ts
index e06a1f5f..70289589 100644
--- a/examples/showcase/pages/CustomLayout.stories.ts
+++ b/examples/showcase/pages/CustomLayout.stories.ts
@@ -1,4 +1,4 @@
-import CustomLayoutPage from './HelloWorld.vue'
+import CustomLayoutPage from './CustomLayout.vue'
 import { NuxtLayout } from '#components'
 import { provide } from 'vue'
 import { PageRouteSymbol } from '#app/components/injections'