Vue3: Add vite plugin for portable stories

code/addons/vitest/src/postinstall.ts

@@ -198,6 +198,11 @@ const getVitestPluginInfo = (framework: string) => {
     frameworkPluginCall = 'storybookSveltekitPlugin()';
   }
 
+  if (framework === '@storybook/vue3-vite') {
+    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'";
+    frameworkPluginCall = 'storybookVuePlugin()';
+  }
+
   return { frameworkPluginImport, frameworkPluginCall };
 };
 

code/frameworks/vue3-vite/package.json

@@ -30,6 +30,11 @@
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
     },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -74,7 +79,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/vite.ts"
     ],
     "platform": "node"
   },

code/frameworks/vue3-vite/src/plugins/vue-template.ts

@@ -0,0 +1,14 @@
+import type { Plugin } from 'vite';
+
+export async function templateCompilation() {
+  return {
+    name: 'storybook:vue-template-compilation',
+    config: () => ({
+      resolve: {
+        alias: {
+          vue: 'vue/dist/vue.esm-bundler.js',
+        },
+      },
+    }),
+  } satisfies Plugin;
+}

code/frameworks/vue3-vite/src/preset.ts

@@ -6,6 +6,7 @@ import type { PluginOption } from 'vite';
 
 import { vueComponentMeta } from './plugins/vue-component-meta';
 import { vueDocgen } from './plugins/vue-docgen';
+import { templateCompilation } from './plugins/vue-template';
 import type { FrameworkOptions, StorybookConfig, VueDocgenPlugin } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
@@ -17,7 +18,7 @@ export const core: PresetProperty<'core'> = {
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
-  const plugins: PluginOption[] = [];
+  const plugins: PluginOption[] = [templateCompilation()];
 
   const framework = await options.presets.apply('framework');
   const frameworkOptions: FrameworkOptions =
@@ -35,11 +36,6 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   const { mergeConfig } = await import('vite');
   return mergeConfig(config, {
     plugins,
-    resolve: {
-      alias: {
-        vue: 'vue/dist/vue.esm-bundler.js',
-      },
-    },
   });
 };
 

code/frameworks/vue3-vite/src/vite.ts

@@ -0,0 +1,5 @@
+import { templateCompilation } from './plugins/vue-template';
+
+export const storybookVuePlugin = () => {
+  return [templateCompilation()];
+};

scripts/tasks/sandbox-parts.ts

@@ -30,7 +30,7 @@ import { executeCLIStep, steps } from '../utils/cli-step';
 import { CODE_DIRECTORY, REPROS_DIRECTORY } from '../utils/constants';
 import { exec } from '../utils/exec';
 import { filterExistsInCodeDir } from '../utils/filterExistsInCodeDir';
-import { addPreviewAnnotations, readMainConfig } from '../utils/main-js';
+import { addPreviewAnnotations, readConfig } from '../utils/main-js';
 import { updatePackageScripts } from '../utils/package-json';
 import { findFirstPath } from '../utils/paths';
 import { workspacePath } from '../utils/workspace';
@@ -378,6 +378,11 @@ const getVitestPluginInfo = (details: TemplateDetails) => {
     frameworkPluginCall = 'storybookSveltekitPlugin()';
   }
 
+  if (framework === '@storybook/vue3-vite') {
+    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'";
+    frameworkPluginCall = 'storybookVuePlugin()';
+  }
+
   return { frameworkPluginImport, frameworkPluginCall };
 };
 
@@ -414,7 +419,6 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
     ${isVue ? 'import * as vueAnnotations from "../src/stories/renderers/vue3/preview.js"' : ''}
 
     const annotations = setProjectAnnotations([
-      { tags: ['vitest'] },
       rendererDocsAnnotations,
       projectAnnotations,
       coreAnnotations,
@@ -424,7 +428,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
       ${isVue ? 'vueAnnotations,' : ''}
     ])
 
-    beforeAll(annotations.beforeAll!)`
+    beforeAll(annotations.beforeAll)`
   );
 
   await writeFile(
@@ -461,13 +465,11 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
           }
           resolve: {
             preserveSymlinks: true,
-            ${isVue ? "alias: { vue: 'vue/dist/vue.esm-bundler.js' }," : ''}
           },
           test: {
             name: "storybook",
             pool: "threads",
             include: [
-              // we need to set the path like this because svelte-kit overrides the root path so this makes it work in all sandboxes
               "src/**/*.{story,stories}.?(c|m)[jt]s?(x)",
               "template-stories/**/*.{story,stories}.?(c|m)[jt]s?(x)",
             ],
@@ -488,7 +490,6 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
               name: "chromium",
               provider: "playwright",
               headless: true,
-              screenshotFailures: false,
             },
             setupFiles: ["./.storybook/vitest.setup.ts"],
             environment: "happy-dom",
@@ -503,8 +504,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
 
   packageJson.scripts = {
     ...packageJson.scripts,
-    vitest:
-      'vitest --pass-with-no-tests --reporter=default --reporter=hanging-process --test-timeout=5000',
+    vitest: 'vitest --reporter=default --reporter=hanging-process --test-timeout=5000',
   };
 
   // This workaround is needed because Vitest seems to have issues in link mode
@@ -562,7 +562,7 @@ export const addStories: Task['run'] = async (
   const cwd = sandboxDir;
   const storiesPath = await findFirstPath([join('src', 'stories'), 'stories'], { cwd });
 
-  const mainConfig = await readMainConfig({ cwd });
+  const mainConfig = await readConfig({ cwd });
   const packageManager = JsPackageManagerFactory.getPackageManager({}, sandboxDir);
 
   // Ensure that we match the right stories in the stories directory
@@ -709,7 +709,7 @@ export const addStories: Task['run'] = async (
 
 export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { disableDocs }) => {
   logger.log('📝 Extending main.js');
-  const mainConfig = await readMainConfig({ cwd: sandboxDir });
+  const mainConfig = await readConfig({ cwd: sandboxDir });
 
   if (key === 'react-vite/default-ts') {
     addRefs(mainConfig);
@@ -787,6 +787,17 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d
   await writeConfig(mainConfig);
 };
 
+export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
+  logger.log('📝 Extending preview.js');
+  const previewConfig = await readConfig({ cwd: sandboxDir, fileName: 'preview' });
+
+  if (template.expected.builder.includes('vite')) {
+    previewConfig.setFieldValue(['tags'], ['vitest']);
+  }
+
+  await writeConfig(previewConfig);
+};
+
 export async function setImportMap(cwd: string) {
   const packageJson = await readJson(join(cwd, 'package.json'));
 

scripts/tasks/sandbox.ts

@@ -42,6 +42,7 @@ export const sandbox: Task = {
       install,
       addStories,
       extendMain,
+      extendPreview,
       init,
       addExtraDependencies,
       setImportMap,
@@ -120,6 +121,8 @@ export const sandbox: Task = {
 
     await extendMain(details, options);
 
+    await extendPreview(details, options);
+
     await setImportMap(details.sandboxDir);
 
     logger.info(`✅ Storybook sandbox created at ${details.sandboxDir}`);

scripts/utils/main-js.ts

@@ -4,18 +4,18 @@ import slash from 'slash';
 
 import { getInterpretedFile } from '../../code/core/src/common';
 import type { ConfigFile } from '../../code/core/src/csf-tools';
-import { readConfig } from '../../code/core/src/csf-tools';
+import { readConfig as csfReadConfig } from '../../code/core/src/csf-tools';
 
-export async function readMainConfig({ cwd }: { cwd: string }) {
+export async function readConfig({ fileName = 'main', cwd }: { fileName?: string; cwd: string }) {
   const configDir = join(cwd, '.storybook');
   if (!existsSync(configDir)) {
     throw new Error(
       `Unable to find the Storybook folder in "${configDir}". Are you sure it exists? Or maybe this folder uses a custom Storybook config directory?`
     );
   }
 
-  const mainConfigPath = getInterpretedFile(resolve(configDir, 'main'));
-  return readConfig(mainConfigPath);
+  const mainConfigPath = getInterpretedFile(resolve(configDir, fileName));
+  return csfReadConfig(mainConfigPath);
 }
 
 export function addPreviewAnnotations(mainConfig: ConfigFile, paths: string[]) {