fix: automatically enable Vue runtime compiler to support Vue templat…

…es and decorators in stories

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>

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: {},
+}

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

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 &&