From 2f539ba3c754e696ac6237622a247d5aa83f0d0c Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Wed, 11 Dec 2024 10:34:08 +0800
Subject: [PATCH] fix: automatically enable Vue runtime compiler to support Vue
 templates and decorators in stories

---
 examples/showcase/components/SimpleButton.vue | 17 ++++++++++++++
 .../components/UseDecorators.stories.ts       | 23 +++++++++++++++++++
 packages/nuxt-module/src/module.ts            |  5 ++++
 packages/storybook-addon/src/preset.ts        |  5 ++++
 4 files changed, 50 insertions(+)
 create mode 100644 examples/showcase/components/SimpleButton.vue
 create mode 100644 examples/showcase/components/UseDecorators.stories.ts

diff --git a/examples/showcase/components/SimpleButton.vue b/examples/showcase/components/SimpleButton.vue
new file mode 100644
index 00000000..30c629db
--- /dev/null
+++ b/examples/showcase/components/SimpleButton.vue
@@ -0,0 +1,17 @@
+<template>
+  <button @click="handleClick">Click me!</button>
+</template>
+
+<script setup lang="ts">
+function handleClick() {
+  alert('Button clicked!')
+}
+</script >
+
+<style scoped>
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+</style>
diff --git a/examples/showcase/components/UseDecorators.stories.ts b/examples/showcase/components/UseDecorators.stories.ts
new file mode 100644
index 00000000..ce1c2c92
--- /dev/null
+++ b/examples/showcase/components/UseDecorators.stories.ts
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import SimpleButton from './SimpleButton.vue'
+
+/**
+ * Shows how to use a decorator to wrap the story with extra markup.
+ * https://storybook.js.org/docs/writing-stories/decorators
+ */
+const meta = {
+  title: 'Storybook Feature/Use Decorators',
+  component: SimpleButton,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({ template: '<div style="margin: 3em;"><story/></div>' }),
+  ],
+} satisfies Meta<typeof SimpleButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const UseDecoratorsStory: Story = {
+  args: {},
+}
diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts
index 00e9e3e3..247c79ba 100644
--- a/packages/nuxt-module/src/module.ts
+++ b/packages/nuxt-module/src/module.ts
@@ -85,6 +85,11 @@ export default defineNuxtModule<ModuleOptions>({
 
     logger.verbose('🔌  Storybook Module Setup')
 
+    if (nuxt.options.dev) {
+      // Enable runtimeCompiler for Vue to support templates in stories
+      nuxt.options.vue.runtimeCompiler = true
+    }
+
     setupStorybook(options, nuxt)
   },
 })
diff --git a/packages/storybook-addon/src/preset.ts b/packages/storybook-addon/src/preset.ts
index ebcef78f..19e9ce58 100644
--- a/packages/storybook-addon/src/preset.ts
+++ b/packages/storybook-addon/src/preset.ts
@@ -87,6 +87,10 @@ async function loadNuxtViteConfig(root: string | undefined) {
       appId: 'nuxt-app',
       buildId: 'storybook',
       ssr: false,
+      // Enable runtime compiler to support Vue templates in stories
+      vue: {
+        runtimeCompiler: true,
+      },
     },
   })
 
@@ -160,6 +164,7 @@ function mergeViteConfig(
   }
 
   // Remove the 'storybook:vue-template-compilation' plugin because it yields out-of-memory issues
+  // Instead, we use Nuxt's runtime compiler to support Vue templates in stories
   const templatePluginIndex = plugins?.findIndex(
     (plugin) =>
       plugin &&