Vue3: Add vite plugin for portable stories

[yannbf]

Closes #

What I did

This PR introduces a plugin in @storybook/vue3-vite so that users can get the necessary config to test their stories using portable stories:

import { defineWorkspace, defaultExclude } from "vitest/config";
import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
import { storybookVuePlugin } from '@storybook/vue3-vite/vite'

export default defineWorkspace([
  {
    extends: "vite.config.ts",
    plugins: [
      storybookTest(),
     storybookVuePlugin() // 👈 Add this plugin, it will allow to mount template-based Vue components
    ],
  }
])

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.5 MB	76.5 MB	0 B	1.81	0%
initSize	161 MB	161 MB	0 B	-0.23	0%
diffSize	84.8 MB	84.8 MB	0 B	-0.24	0%
buildSize	7.48 MB	7.48 MB	115 B	0.83	0%
buildSbAddonsSize	1.62 MB	1.62 MB	0 B	1.73	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.31 MB	2.31 MB	0 B	0.82	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.47 MB	4.47 MB	0 B	0.82	0%
buildPreviewSize	3.01 MB	3.01 MB	115 B	0.84	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	23.2s	6.3s	-16s -807ms	-1.28	🔰-262.7%
generateTime	19.5s	18.2s	-1s -389ms	-0.9	-7.6%
initTime	16.8s	15s	-1s -839ms	-0.77	-12.3%
buildTime	14.2s	13.5s	-721ms	0.7	-5.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7s	7.1s	116ms	-0.22	1.6%
devManagerResponsive	4.3s	4.6s	276ms	-0.1	5.9%
devManagerHeaderVisible	685ms	791ms	106ms	-0.23	13.4%
devManagerIndexVisible	726ms	837ms	111ms	-0.18	13.3%
devStoryVisibleUncached	1.1s	1.4s	274ms	-0.17	19.4%
devStoryVisible	724ms	837ms	113ms	-0.18	13.5%
devAutodocsVisible	684ms	678ms	-6ms	-0.52	-0.9%
devMDXVisible	889ms	778ms	-111ms	0.2	-14.3%
buildManagerHeaderVisible	713ms	752ms	39ms	-0.03	5.2%
buildManagerIndexVisible	720ms	759ms	39ms	-0.06	5.1%
buildStoryVisible	795ms	799ms	4ms	-0.24	0.5%
buildAutodocsVisible	654ms	735ms	81ms	0.58	11%
buildMDXVisible	610ms	670ms	60ms	-0.19	9%

Greptile Summary

This PR introduces a new Vite plugin for Vue3 in Storybook, enabling portable story testing and improving Vue3 component support with Vite as a builder.

• Added storybookVuePlugin in code/frameworks/vue3-vite/src/vite.ts for Vue3 template compilation
• Modified code/frameworks/vue3-vite/src/preset.ts to include the new templateCompilation plugin
• Updated code/addons/vitest/src/postinstall.ts to support Vue3 Vite plugin in Vitest addon
• Enhanced scripts/utils/main-js.ts with a more flexible readConfig function
• Added extendPreview task in scripts/tasks/sandbox.ts for additional preview environment configuration

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 744f259. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[greptile-apps]

LGTM

_{8 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[shilman]

LGTM aside from one minor change

[JReinhold]

LGTM 🚀