storybook-addon-dependency-previews 0.5.4 → 0.6.0

package/README.md

@@ -8,7 +8,7 @@
 
 A plugin for [Storybook](https://storybook.js.org/) that shows the full dependency tree in both directions (built with and used by) the components in your application.
 
-Currently works with **React**, **Svelte**, **Angular**, and **Next.js**. The automated `sb-deps setup` wizard handles Vite-based projects (React, Svelte) end-to-end. Webpack-based projects (Angular, Next.js) need a one-time manual setup — see the [manual-setup-webpack guide](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md) below.
+Currently works with **React**, **Svelte**, **Vue 3**, **Angular**, and **Next.js**. The automated `sb-deps setup` wizard handles Vite-based projects (React, Svelte, Vue 3) end-to-end. Webpack-based projects (Angular, Next.js) need a one-time manual setup — see the [manual-setup-webpack guide](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md) below.
 
 This is what you will see in Storybook after Dependency Previews have been installed and configured:
 
@@ -28,10 +28,18 @@ The below image demonstrates what you will see when you open up some of the depe
 
 #### Svelte demos
 
-- [Svelte Storybook demo site](https://dependency-previews-storybook-svelte.netlify.app/)
+- [Svelte Storybook demo site](https://dependency-previews-storybook-svelte.netlify.app/?path=/docs/04-templates-home-template--docs)
 - [Svelte rendered example website](https://dependency-previews-demo-site-svelte.netlify.app/)
 - [Svelte demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/svelte)
 
+#### Vue demos
+
+Vue version built for Vue 3.
+
+- [Vue Storybook demo site](https://dependency-previews-storybook-vue.netlify.app/?path=/docs/04-templates-home-template--docs)
+- [Vue rendered example website](https://dependency-previews-demo-site-vue.netlify.app/)
+- [Vue demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/vue)
+
 #### Angular demos
 
 - [Angular Storybook demo site](https://dependency-previews-storybook-angular.netlify.app/?path=/docs/04-templates-home-template--docs)
@@ -42,7 +50,7 @@ The below image demonstrates what you will see when you open up some of the depe
 
 ## Installation guide
 
-### Quick start (React and Svelte)
+### Quick start (React, Svelte, and Vue 3)
 
 After running `npx storybook@latest init` in your project, run the setup wizard:
 
@@ -84,9 +92,9 @@ When it finishes, run `npm run sb` (or your package manager's equivalent) to sta
 
 ### Manual setup
 
-The wizard supports React (`@storybook/react-vite`) and Svelte (`@storybook/sveltekit`, `@storybook/svelte-vite`) — all Vite-based. **Angular (`@storybook/angular`) and Next.js (`@storybook/nextjs`) projects are both webpack-based and require manual setup** — the wizard's preview-patcher relies on Vite's `import.meta.glob`, which webpack doesn't expose. Follow the matching guide below:
+The wizard supports React (`@storybook/react-vite`), Svelte (`@storybook/sveltekit`, `@storybook/svelte-vite`), and Vue 3 (`@storybook/vue3-vite`) — all Vite-based. **Angular (`@storybook/angular`) and Next.js (`@storybook/nextjs`) projects are both webpack-based and require manual setup** — the wizard's preview-patcher relies on Vite's `import.meta.glob`, which webpack doesn't expose. Follow the matching guide below:
 
-- [Manual setup — Vite (React, Svelte)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-vite.md)
+- [Manual setup — Vite (React, Svelte, Vue 3)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-vite.md)
 - [Manual setup — webpack (`@storybook/angular`, `@storybook/nextjs`)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md)
 
 ## Configuration file (optional)
@@ -176,6 +184,12 @@ export function ${componentName}({}: ${propsName}) {
 			/** Customize the generated .stories.svelte file */
 			story: ({ componentName, title, tags }) => '...',
 		},
+		vue: {
+			/** Customize the generated .vue component file */
+			component: ({ componentName }) => '...',
+			/** Customize the generated .stories.ts file */
+			story: ({ componentName, title, tags }) => '...',
+		},
 		angular: {
 			/** Customize the generated .component.ts file */
 			component: ({

package/dist/addon/vitePlugin.cjs

@@ -5,6 +5,11 @@ let node_path = require("node:path");
 node_path = require_rolldown_runtime.__toESM(node_path);
 
 //#region src/addon/vitePlugin.ts
+const jsonUrlPath = "/dependency-previews.json";
+function readDependencyPreviewsJson() {
+	const jsonPath = (0, node_path.resolve)(process.cwd(), ".storybook/dependency-previews.json");
+	return (0, node_fs.existsSync)(jsonPath) ? (0, node_fs.readFileSync)(jsonPath, "utf8") : "{}";
+}
 function sbDepsVitePlugin() {
 	const virtId = "virtual:dependency-previews-json";
 	const resolved = "\0" + virtId;
@@ -15,9 +20,20 @@ function sbDepsVitePlugin() {
 		},
 		load(id) {
 			if (id !== resolved) return null;
-			const jsonPath = (0, node_path.resolve)(process.cwd(), ".storybook/dependency-previews.json");
-			const json = (0, node_fs.existsSync)(jsonPath) ? (0, node_fs.readFileSync)(jsonPath, "utf8") : "{}";
-			return `export default ${json};`;
+			return `export default ${readDependencyPreviewsJson()};`;
+		},
+		configureServer(server) {
+			server.middlewares.use(jsonUrlPath, (_req, res) => {
+				res.setHeader("Content-Type", "application/json");
+				res.end(readDependencyPreviewsJson());
+			});
+		},
+		generateBundle() {
+			this.emitFile({
+				type: "asset",
+				fileName: "dependency-previews.json",
+				source: readDependencyPreviewsJson()
+			});
 		}
 	};
 }

package/dist/addon/vitePlugin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"vitePlugin.cjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nexport function sbDepsVitePlugin() {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\tconst jsonPath = resolve(\n\t\t\t\tprocess.cwd(),\n\t\t\t\t'.storybook/dependency-previews.json',\n\t\t\t)\n\t\t\tconst json = existsSync(jsonPath) ? readFileSync(jsonPath, 'utf8') : '{}'\n\t\t\treturn `export default ${json};`\n\t\t},\n\t}\n}\n"],"mappings":";;;;;;;AAGA,SAAgB,mBAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;GAC5B,MAAM,kCACL,QAAQ,KAAK,EACb,sCACA;GACD,MAAM,+BAAkB,SAAS,6BAAgB,UAAU,OAAO,GAAG;AACrE,UAAO,kBAAkB,KAAK;;EAE/B"}
+{"version":3,"file":"vitePlugin.cjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\nimport type { Plugin } from 'vite'\n\nconst jsonUrlPath = '/dependency-previews.json'\n\nfunction readDependencyPreviewsJson(): string {\n\tconst jsonPath = resolve(\n\t\tprocess.cwd(),\n\t\t'.storybook/dependency-previews.json',\n\t)\n\treturn existsSync(jsonPath) ? readFileSync(jsonPath, 'utf8') : '{}'\n}\n\nexport function sbDepsVitePlugin(): Plugin {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\treturn `export default ${readDependencyPreviewsJson()};`\n\t\t},\n\t\t// The manager-side panel (GraphView) fetches the JSON over HTTP — it\n\t\t// can't import the virtual module above because the manager bundle is\n\t\t// prebuilt by Storybook, not bundled by the project's Vite config.\n\t\tconfigureServer(server) {\n\t\t\tserver.middlewares.use(jsonUrlPath, (_req, res) => {\n\t\t\t\t// Read per-request so `sb-deps --watch` regenerations are served\n\t\t\t\t// without restarting Storybook.\n\t\t\t\tres.setHeader('Content-Type', 'application/json')\n\t\t\t\tres.end(readDependencyPreviewsJson())\n\t\t\t})\n\t\t},\n\t\t// Emit the JSON into `storybook build` output so the panel's fetch also\n\t\t// works in deployed static Storybooks, mirroring the dev middleware.\n\t\tgenerateBundle() {\n\t\t\tthis.emitFile({\n\t\t\t\ttype: 'asset',\n\t\t\t\tfileName: 'dependency-previews.json',\n\t\t\t\tsource: readDependencyPreviewsJson(),\n\t\t\t})\n\t\t},\n\t}\n}\n"],"mappings":";;;;;;;AAIA,MAAM,cAAc;AAEpB,SAAS,6BAAqC;CAC7C,MAAM,kCACL,QAAQ,KAAK,EACb,sCACA;AACD,gCAAkB,SAAS,6BAAgB,UAAU,OAAO,GAAG;;AAGhE,SAAgB,mBAA2B;CAC1C,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;AAC5B,UAAO,kBAAkB,4BAA4B,CAAC;;EAKvD,gBAAgB,QAAQ;AACvB,UAAO,YAAY,IAAI,cAAc,MAAM,QAAQ;AAGlD,QAAI,UAAU,gBAAgB,mBAAmB;AACjD,QAAI,IAAI,4BAA4B,CAAC;KACpC;;EAIH,iBAAiB;AAChB,QAAK,SAAS;IACb,MAAM;IACN,UAAU;IACV,QAAQ,4BAA4B;IACpC,CAAC;;EAEH"}

package/dist/addon/vitePlugin.d.cts

@@ -1,9 +1,7 @@
+import { Plugin } from "vite";
+
 //#region src/addon/vitePlugin.d.ts
-declare function sbDepsVitePlugin(): {
-  name: string;
-  resolveId(id: string): string | null;
-  load(id: string): string | null;
-};
+declare function sbDepsVitePlugin(): Plugin;
 //#endregion
 export { sbDepsVitePlugin };
 //# sourceMappingURL=vitePlugin.d.cts.map

package/dist/addon/vitePlugin.d.mts

@@ -1,9 +1,7 @@
+import { Plugin } from "vite";
+
 //#region src/addon/vitePlugin.d.ts
-declare function sbDepsVitePlugin(): {
-  name: string;
-  resolveId(id: string): string | null;
-  load(id: string): string | null;
-};
+declare function sbDepsVitePlugin(): Plugin;
 //#endregion
 export { sbDepsVitePlugin };
 //# sourceMappingURL=vitePlugin.d.mts.map

package/dist/addon/vitePlugin.mjs

@@ -2,6 +2,11 @@ import { existsSync, readFileSync } from "node:fs";
 import { resolve } from "node:path";
 
 //#region src/addon/vitePlugin.ts
+const jsonUrlPath = "/dependency-previews.json";
+function readDependencyPreviewsJson() {
+	const jsonPath = resolve(process.cwd(), ".storybook/dependency-previews.json");
+	return existsSync(jsonPath) ? readFileSync(jsonPath, "utf8") : "{}";
+}
 function sbDepsVitePlugin() {
 	const virtId = "virtual:dependency-previews-json";
 	const resolved = "\0" + virtId;
@@ -12,9 +17,20 @@ function sbDepsVitePlugin() {
 		},
 		load(id) {
 			if (id !== resolved) return null;
-			const jsonPath = resolve(process.cwd(), ".storybook/dependency-previews.json");
-			const json = existsSync(jsonPath) ? readFileSync(jsonPath, "utf8") : "{}";
-			return `export default ${json};`;
+			return `export default ${readDependencyPreviewsJson()};`;
+		},
+		configureServer(server) {
+			server.middlewares.use(jsonUrlPath, (_req, res) => {
+				res.setHeader("Content-Type", "application/json");
+				res.end(readDependencyPreviewsJson());
+			});
+		},
+		generateBundle() {
+			this.emitFile({
+				type: "asset",
+				fileName: "dependency-previews.json",
+				source: readDependencyPreviewsJson()
+			});
 		}
 	};
 }

package/dist/addon/vitePlugin.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"vitePlugin.mjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nexport function sbDepsVitePlugin() {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\tconst jsonPath = resolve(\n\t\t\t\tprocess.cwd(),\n\t\t\t\t'.storybook/dependency-previews.json',\n\t\t\t)\n\t\t\tconst json = existsSync(jsonPath) ? readFileSync(jsonPath, 'utf8') : '{}'\n\t\t\treturn `export default ${json};`\n\t\t},\n\t}\n}\n"],"mappings":";;;;AAGA,SAAgB,mBAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;GAC5B,MAAM,WAAW,QAChB,QAAQ,KAAK,EACb,sCACA;GACD,MAAM,OAAO,WAAW,SAAS,GAAG,aAAa,UAAU,OAAO,GAAG;AACrE,UAAO,kBAAkB,KAAK;;EAE/B"}
+{"version":3,"file":"vitePlugin.mjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\nimport type { Plugin } from 'vite'\n\nconst jsonUrlPath = '/dependency-previews.json'\n\nfunction readDependencyPreviewsJson(): string {\n\tconst jsonPath = resolve(\n\t\tprocess.cwd(),\n\t\t'.storybook/dependency-previews.json',\n\t)\n\treturn existsSync(jsonPath) ? readFileSync(jsonPath, 'utf8') : '{}'\n}\n\nexport function sbDepsVitePlugin(): Plugin {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\treturn `export default ${readDependencyPreviewsJson()};`\n\t\t},\n\t\t// The manager-side panel (GraphView) fetches the JSON over HTTP — it\n\t\t// can't import the virtual module above because the manager bundle is\n\t\t// prebuilt by Storybook, not bundled by the project's Vite config.\n\t\tconfigureServer(server) {\n\t\t\tserver.middlewares.use(jsonUrlPath, (_req, res) => {\n\t\t\t\t// Read per-request so `sb-deps --watch` regenerations are served\n\t\t\t\t// without restarting Storybook.\n\t\t\t\tres.setHeader('Content-Type', 'application/json')\n\t\t\t\tres.end(readDependencyPreviewsJson())\n\t\t\t})\n\t\t},\n\t\t// Emit the JSON into `storybook build` output so the panel's fetch also\n\t\t// works in deployed static Storybooks, mirroring the dev middleware.\n\t\tgenerateBundle() {\n\t\t\tthis.emitFile({\n\t\t\t\ttype: 'asset',\n\t\t\t\tfileName: 'dependency-previews.json',\n\t\t\t\tsource: readDependencyPreviewsJson(),\n\t\t\t})\n\t\t},\n\t}\n}\n"],"mappings":";;;;AAIA,MAAM,cAAc;AAEpB,SAAS,6BAAqC;CAC7C,MAAM,WAAW,QAChB,QAAQ,KAAK,EACb,sCACA;AACD,QAAO,WAAW,SAAS,GAAG,aAAa,UAAU,OAAO,GAAG;;AAGhE,SAAgB,mBAA2B;CAC1C,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;AAC5B,UAAO,kBAAkB,4BAA4B,CAAC;;EAKvD,gBAAgB,QAAQ;AACvB,UAAO,YAAY,IAAI,cAAc,MAAM,QAAQ;AAGlD,QAAI,UAAU,gBAAgB,mBAAmB;AACjD,QAAI,IAAI,4BAA4B,CAAC;KACpC;;EAIH,iBAAiB;AAChB,QAAK,SAAS;IACb,MAAM;IACN,UAAU;IACV,QAAQ,4BAA4B;IACpC,CAAC;;EAEH"}

package/dist/cli/sb-deps.cjs

@@ -227,6 +227,10 @@ function isDecoratorSvelte(absPath) {
 	const norm = absPath.replace(/\\/g, "/");
 	return srcSubpathRegex("\\.decorator\\.svelte$").test(norm);
 }
+function isComponentsVue(absPath) {
+	const norm = absPath.replace(/\\/g, "/");
+	return srcSubpathRegex("\\.vue$").test(norm) && !STORY_FILE_REGEX.test(norm);
+}
 function isComponentsAngularTs(absPath) {
 	const norm = absPath.replace(/\\/g, "/");
 	return srcSubpathRegex("\\.component\\.ts$").test(norm);
@@ -241,6 +245,9 @@ function componentBaseFromComponent(absCompPath) {
 function componentBaseFromSvelteComponent(absCompPath) {
 	return (0, node_path.basename)(absCompPath, ".svelte");
 }
+function componentBaseFromVueComponent(absCompPath) {
+	return (0, node_path.basename)(absCompPath, ".vue");
+}
 function componentBaseFromAngularComponent(absCompPath) {
 	return (0, node_path.basename)(absCompPath).replace(/\.component\.(ts|html)$/i, "");
 }
@@ -278,6 +285,11 @@ function storyPathForSvelteComponent(absCompPath) {
 	const base = componentBaseFromSvelteComponent(absCompPath);
 	return (0, node_path.join)(dir, `${base}.stories.svelte`);
 }
+function storyPathForVueComponent(absCompPath) {
+	const dir = (0, node_path.dirname)(absCompPath);
+	const base = componentBaseFromVueComponent(absCompPath);
+	return (0, node_path.join)(dir, `${base}.stories.ts`);
+}
 function makeTitleFromComponent(absCompPath) {
 	const srcRoot = (0, node_path.join)(projectRoot, SRC_DIR) + node_path.sep;
 	const normAbs = absCompPath.replace(/\\/g, "/");
@@ -464,6 +476,91 @@ function ensureStoryForSvelteComponent(absCompPath) {
 	if ((0, node_fs.existsSync)(sPath)) return null;
 	return scaffoldStoryForSvelteComponent(absCompPath);
 }
+function scaffoldVueComponent(absCompPath) {
+	const base = componentBaseFromVueComponent(absCompPath);
+	const componentName = toPascalCase(base);
+	const tpl = SCAFFOLD_CONFIG?.vue?.component?.({ componentName }) ?? `<script setup lang="ts">
+export interface PropsFor${componentName} {
+}
+
+const {  } = defineProps<PropsFor${componentName}>()
+<\/script>
+
+<template>
+	<div class="${componentName}">
+		<slot />
+	</div>
+</template>
+`;
+	(0, node_fs.writeFileSync)(absCompPath, tpl, "utf8");
+	info(`scaffolded vue component → ${rel(absCompPath)}`);
+}
+function makeTitleFromVueComponent(absCompPath) {
+	const srcRoot = (0, node_path.join)(projectRoot, SRC_DIR) + node_path.sep;
+	const normAbs = absCompPath.replace(/\\/g, "/");
+	const relFromSrc = normAbs.startsWith(srcRoot.replace(/\\/g, "/")) ? normAbs.slice(srcRoot.length) : absCompPath.replace(projectRoot + node_path.sep, "").replace(/\\/g, "/");
+	const dir = node_path.posix.dirname(relFromSrc);
+	let segments = dir.split("/").filter(Boolean);
+	if (segments[0] && /^components?$/i.test(segments[0])) segments = segments.slice(1);
+	const titledFolders = segments.map((s) => toTitleCase(toWords(s)));
+	const compName = componentBaseFromVueComponent(absCompPath);
+	const compTitle = toTitleCase(toWords(compName));
+	const fullStoryPath = [...titledFolders, compTitle].filter(Boolean);
+	const dedupedStoryPath = [...new Set(fullStoryPath)];
+	return dedupedStoryPath.join(" / ");
+}
+function scaffoldStoryForVueComponent(absCompPath) {
+	const base = componentBaseFromVueComponent(absCompPath);
+	const componentName = toPascalCase(base);
+	const title = makeTitleFromVueComponent(absCompPath);
+	const atomic = detectAtomicTag(absCompPath);
+	const tags = ["autodocs"];
+	if (atomic) tags.push(atomic);
+	const storyTpl = SCAFFOLD_CONFIG?.vue?.story?.({
+		componentName,
+		title,
+		tags
+	}) ?? `import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { StoryParameters } from 'storybook-addon-dependency-previews'
+import ${componentName}, { type PropsFor${componentName} } from './${componentName}.vue'
+
+const meta: Meta<typeof ${componentName}> = {
+	title: '${title}',
+	component: ${componentName},
+	tags: ${JSON.stringify(tags)},
+	parameters: {
+		layout: 'padded',
+	} satisfies StoryParameters,
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+	args: {} satisfies PropsFor${componentName},
+	render: (args) => ({
+		components: { ${componentName} },
+		setup() {
+			return { args }
+		},
+		template: \`
+<${componentName} v-bind="args">
+	${componentName}
+</${componentName}>\`,
+	}),
+}
+`;
+	const storyPath = storyPathForVueComponent(absCompPath);
+	(0, node_fs.writeFileSync)(storyPath, storyTpl, "utf8");
+	info(`scaffolded vue story → ${rel(storyPath)}`);
+	return storyPath;
+}
+function ensureStoryForVueComponent(absCompPath) {
+	const sPath = storyPathForVueComponent(absCompPath);
+	if ((0, node_fs.existsSync)(sPath)) return null;
+	return scaffoldStoryForVueComponent(absCompPath);
+}
 function storyPathForAngularComponent(absCompPath) {
 	const dir = (0, node_path.dirname)(absCompPath);
 	const base = componentBaseFromAngularComponent(absCompPath);
@@ -671,7 +768,7 @@ function startWatcher() {
 	const includeGlobs = [
 		"**/*.stories.{ts,tsx,js,jsx,mdx,svelte}",
 		"**/*.story.{ts,tsx,js,jsx,mdx,svelte}",
-		`${srcPrefix}**/*.{ts,tsx,js,jsx,svelte}`,
+		`${srcPrefix}**/*.{ts,tsx,js,jsx,svelte,vue}`,
 		`${srcPrefix}**/*.component.html`,
 		"depcruise.config.cjs",
 		".dependency-cruiser.{js,cjs}"
@@ -720,6 +817,10 @@ function startWatcher() {
 				await handleSvelteComponentCreation(abs, relPath);
 				continue;
 			}
+			if (isComponentsVue(abs) && ev.type === "create") {
+				await handleVueComponentCreation(abs, relPath);
+				continue;
+			}
 			if (isComponentsAngularTs(abs) && ev.type === "create") {
 				await handleAngularComponentCreation(abs, relPath, "internal");
 				continue;
@@ -771,6 +872,16 @@ function startWatcher() {
 			kick("create:story", createdStory);
 		}
 	}
+	async function handleVueComponentCreation(abs, relPath) {
+		if (isEmptyOrWhitespace(abs)) {
+			scaffoldVueComponent(abs);
+		}
+		console.log("Vue component creation detected:", relPath);
+		const createdStory = ensureStoryForVueComponent(abs);
+		if (createdStory) {
+			kick("create:story", createdStory);
+		}
+	}
 	async function handleAngularComponentCreation(abs, relPath, templateStyle) {
 		if (isEmptyOrWhitespace(abs)) {
 			scaffoldAngularComponent(abs, templateStyle);