diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index bc86e2120f5c..cdf788cb9219 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,11 @@
+## 8.3.0-beta.1
+
+- ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman!
+- Core: Move `util` to regular dependency - [#29008](https://github.com/storybookjs/storybook/pull/29008), thanks @ndelangen!
+- Next.js-Vite: Streamline Next.js dir option - [#28995](https://github.com/storybookjs/storybook/pull/28995), thanks @valentinpalkovic!
+- Next.js: Fix wrong Next.js framework reference - [#28992](https://github.com/storybookjs/storybook/pull/28992), thanks @valentinpalkovic!
+- Vue3: Add vite plugin for portable stories - [#29004](https://github.com/storybookjs/storybook/pull/29004), thanks @yannbf!
+
 ## 8.3.0-beta.0
 
 Empty release identical to `v8.3.0-alpha.11`
diff --git a/MIGRATION.md b/MIGRATION.md
index f6dcfbf3b109..d63cd568816f 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -430,8 +430,12 @@ These APIs allowed addons to render arbitrary content in the Storybook sidebar.
 
 > [!NOTE]
 > You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
+> 
+> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
 
-The `addon-backgrounds` addon now uses a new format for parameters. The `backgrounds` parameter is now an object with an `options` property that is assigned to an object of background values, where the key is used when setting the global value.
+The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds.
+The `backgrounds` parameter is now an object with an `options` property.
+This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `value` property.
 
 ```diff
 // .storybook/preview.js
@@ -472,8 +476,13 @@ This locks that story to the `twitter` background, it cannot be changed by the a
 
 > [!NOTE]
 > You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
+> 
+> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
 
-The `addon-viewport` addon now uses a new format for parameters. The `viewport` parameter is now an object with an `options` property that is assigned to an object of viewport values, where the key is used when setting the global value.
+The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports.
+The `viewport` parameter is now an object with an `options` property.
+This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `styles` property.
+The `styles` property is an object with a `width` and a `height` property.
 
 ```diff
 // .storybook/preview.js
@@ -501,7 +510,8 @@ export const parameters = {
 };
 ```
 
-Setting an override value should now be done via a `globals` property on your component/meta or story itself. Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`.
+Setting an override value should now be done via a `globals` property on your component/meta or story itself.
+Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`.
 
 ```diff
 // Button.stories.ts
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 2358bcbc9724..3ffcd813628e 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/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 };
 };
 
diff --git a/code/core/package.json b/code/core/package.json
index bff10efa0dc9..92cf625d808c 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -286,6 +286,7 @@
     "process": "^0.11.10",
     "recast": "^0.23.5",
     "semver": "^7.6.2",
+    "util": "^0.12.5",
     "ws": "^8.2.3"
   },
   "devDependencies": {
@@ -418,7 +419,6 @@
     "typescript": "^5.3.2",
     "unique-string": "^3.0.0",
     "use-resize-observer": "^9.1.0",
-    "util": "^0.12.4",
     "watchpack": "^2.2.0"
   },
   "publishConfig": {
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index ec64caeed26a..fe841c49f488 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -795,6 +795,26 @@ describe('ConfigFile', () => {
           export default preview;
         `);
       });
+
+      it('root globals as const satisfies as variable', () => {
+        expect(
+          removeField(
+            ['globals'],
+            dedent`
+              const preview = {
+                globals: { a: 1 },
+                bar: { a: 1 }
+              } as const satisfies Foo;
+              export default preview;
+            `
+          )
+        ).toMatchInlineSnapshot(`
+          const preview = {
+            bar: { a: 1 }
+          } as const satisfies Foo;
+          export default preview;
+        `);
+      });
     });
 
     describe('quotes', () => {
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 161af38022f3..5cb0d28234eb 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -51,6 +51,13 @@ const propKey = (p: t.ObjectProperty) => {
   return null;
 };
 
+const unwrap = (node: t.Node | undefined | null): any => {
+  if (t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node)) {
+    return unwrap(node.expression);
+  }
+  return node;
+};
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const _getPath = (path: string[], node: t.Node): t.Node | undefined => {
   if (path.length === 0) {
@@ -191,9 +198,7 @@ export class ConfigFile {
               ? _findVarInitialization(node.declaration.name, parent)
               : node.declaration;
 
-          if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) {
-            decl = decl.expression;
-          }
+          decl = unwrap(decl);
 
           if (t.isObjectExpression(decl)) {
             self._exportsObject = decl;
@@ -275,9 +280,7 @@ export class ConfigFile {
                 exportObject = _findVarInitialization(right.name, parent as t.Program) as any;
               }
 
-              if (t.isTSAsExpression(exportObject) || t.isTSSatisfiesExpression(exportObject)) {
-                exportObject = exportObject.expression;
-              }
+              exportObject = unwrap(exportObject);
 
               if (t.isObjectExpression(exportObject)) {
                 self._exportsObject = exportObject;
@@ -517,9 +520,8 @@ export class ConfigFile {
           if (t.isIdentifier(decl)) {
             decl = _findVarInitialization(decl.name, this._ast.program);
           }
-          if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) {
-            decl = decl.expression;
-          }
+
+          decl = unwrap(decl);
           if (t.isObjectExpression(decl)) {
             const properties = decl.properties as t.ObjectProperty[];
             removeProperty(properties, path[0]);
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts
index 02e335834b8a..b1eb6a692ef0 100644
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts
@@ -1,10 +1,11 @@
 // We need this import to be a singleton, and because it's used in multiple entrypoints
 // both in ESM and CJS, importing it via the package name instead of having a local import
 // is the only way to achieve it actually being a singleton
+import { fn } from '@storybook/test';
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { headers } from '@storybook/nextjs/headers.mock';
-import { fn } from '@storybook/test';
+import { headers } from '@storybook/experimental-nextjs-vite/headers.mock';
 
 import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
 
diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts
index af5deabf2b87..6af7f9a877f0 100644
--- a/code/frameworks/experimental-nextjs-vite/src/preset.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/preset.ts
@@ -1,4 +1,6 @@
 // https://storybook.js.org/docs/react/addons/writing-presets
+import path from 'node:path';
+
 import type { PresetProperty } from 'storybook/internal/types';
 
 import type { StorybookConfigVite } from '@storybook/builder-vite';
@@ -7,7 +9,7 @@ import { dirname, join } from 'path';
 // @ts-expect-error - tsconfig settings have to be moduleResolution=Bundler and module=Preserve
 import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs';
 
-import type { StorybookConfig } from './types';
+import type { FrameworkOptions } from './types';
 
 export const core: PresetProperty<'core'> = async (config, options) => {
   const framework = await options.presets.apply('framework');
@@ -34,14 +36,10 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry =
 
 export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, options) => {
   config.plugins = config.plugins || [];
-  const framework = (await options.presets.apply(
-    'framework',
-    {},
-    options
-  )) as StorybookConfig['framework'];
-
-  const nextAppDir = typeof framework !== 'string' ? framework.options.nextAppDir : undefined;
-  config.plugins.push(vitePluginStorybookNextjs({ dir: nextAppDir }));
+  const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
+
+  const nextDir = nextConfigPath ? path.dirname(nextConfigPath) : undefined;
+  config.plugins.push(vitePluginStorybookNextjs({ dir: nextDir }));
 
   return config;
 };
diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts
index cb8ebb737b02..8de91a4430d9 100644
--- a/code/frameworks/experimental-nextjs-vite/src/types.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/types.ts
@@ -9,12 +9,8 @@ type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
-  /**
-   * The directory where the Next.js app is located.
-   *
-   * @default process.cwd()
-   */
-  nextAppDir?: string;
+  /** The path to the Next.js configuration file. */
+  nextConfigPath?: string;
   builder?: BuilderOptions;
 };
 
diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx
index a88ae1f705b7..9796a5dcddcd 100644
--- a/code/frameworks/nextjs/src/preview.tsx
+++ b/code/frameworks/nextjs/src/preview.tsx
@@ -5,7 +5,6 @@ import type { Addon_DecoratorFunction, Addon_LoaderFunction } from 'storybook/in
 // is the only way to achieve it actually being a singleton
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { cookies, headers } from '@storybook/nextjs/headers.mock';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { createNavigation } from '@storybook/nextjs/navigation.mock';
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 9c9fe27f43e0..80f022446be5 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/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"
   },
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-template.ts b/code/frameworks/vue3-vite/src/plugins/vue-template.ts
new file mode 100644
index 000000000000..325bc20341b4
--- /dev/null
+++ b/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;
+}
diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts
index 057b9a3d92a1..574ab0a04ad3 100644
--- a/code/frameworks/vue3-vite/src/preset.ts
+++ b/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',
-      },
-    },
   });
 };
 
diff --git a/code/frameworks/vue3-vite/src/vite.ts b/code/frameworks/vue3-vite/src/vite.ts
new file mode 100644
index 000000000000..eb2a3345e937
--- /dev/null
+++ b/code/frameworks/vue3-vite/src/vite.ts
@@ -0,0 +1,5 @@
+import { templateCompilation } from './plugins/vue-template';
+
+export const storybookVuePlugin = () => {
+  return [templateCompilation()];
+};
diff --git a/code/package.json b/code/package.json
index 119cadfb7f2a..2817d7920aea 100644
--- a/code/package.json
+++ b/code/package.json
@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.3.0-beta.1"
 }
diff --git a/code/yarn.lock b/code/yarn.lock
index c66db4d13c36..e7023fe8c13f 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6034,7 +6034,7 @@ __metadata:
     typescript: "npm:^5.3.2"
     unique-string: "npm:^3.0.0"
     use-resize-observer: "npm:^9.1.0"
-    util: "npm:^0.12.4"
+    util: "npm:^0.12.5"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
   languageName: unknown
diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx
index 19509b523a3c..c5a8828f421f 100644
--- a/docs/api/doc-blocks/doc-block-story.mdx
+++ b/docs/api/doc-blocks/doc-block-story.mdx
@@ -79,7 +79,7 @@ Because all stories render simultaneously in docs entries, play functions can pe
 However, if you know your play function is “safe” to run in docs, you can use this prop to run it automatically.
 
 <Callout variant="info">
-  If a story uses [`mount` in its play function](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered), it will not render in docs unless `autoplay` is set to `true`.
+  If a story uses [`mount` in its play function](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered), it will not render in docs unless `autoplay` is set to `true`.
 </Callout>
 
 ### `height`
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
index 64038d44dd7a..5734fd2385e6 100644
--- a/docs/api/portable-stories/portable-stories-jest.mdx
+++ b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -168,7 +168,7 @@ sidebar:
   These are the configurations needed in the setup file:
   - preview annotations: those defined in `.storybook/preview.ts`
   - addon annotations (optional): those exported by addons
-  - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
+  - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall))
 
   {/* prettier-ignore-start */}
 
@@ -222,7 +222,7 @@ sidebar:
 
   ### 3. Run
 
-  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
+  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/component-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
 
   👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called.
 
diff --git a/docs/api/portable-stories/portable-stories-playwright.mdx b/docs/api/portable-stories/portable-stories-playwright.mdx
index 2cbae20f3dd9..e3973b4d7682 100644
--- a/docs/api/portable-stories/portable-stories-playwright.mdx
+++ b/docs/api/portable-stories/portable-stories-playwright.mdx
@@ -120,7 +120,7 @@ sidebar:
   These are the configurations needed in the setup file:
   - preview annotations: those defined in `.storybook/preview.ts`
   - addon annotations (optional): those exported by addons
-  - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
+  - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall))
 
   {/* prettier-ignore-start */}
 
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index 11aa9b99475d..a764fbe28a56 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -174,7 +174,7 @@ sidebar:
   These are the configurations needed in the setup file:
   - preview annotations: those defined in `.storybook/preview.ts`
   - addon annotations (optional): those exported by addons
-  - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
+  - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall))
 
   {/* prettier-ignore-start */}
 
@@ -230,7 +230,7 @@ sidebar:
 
   ### 3. Run
 
-  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
+  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/component-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
 
   👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called.
 
diff --git a/docs/builders/vite.mdx b/docs/builders/vite.mdx
index 8c39bd909319..8f226e4f5844 100644
--- a/docs/builders/vite.mdx
+++ b/docs/builders/vite.mdx
@@ -97,9 +97,9 @@ Currently, [automatic argType inference](../api/arg-types.mdx#automatic-argtype-
 
 {/* prettier-ignore-end */}
 
-### Interaction tests not working as expected
+### Component tests not working as expected
 
-If you are migrating from a Webpack-based project, such as [CRA](https://create-react-app.dev/), to Vite, and you have enabled Interaction testing with the [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) addon, you may run into a situation where your tests fail to execute notifying you that the `window` object is not defined. To resolve this issue, you can create a `preview-head.html` file in your Storybook configuration directory and include the following:
+If you are migrating from a Webpack-based project, such as [CRA](https://create-react-app.dev/), to Vite, and you have enabled component testing with the [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) addon, you may run into a situation where your tests fail to execute notifying you that the `window` object is not defined. To resolve this issue, you can create a `preview-head.html` file in your Storybook configuration directory and include the following:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx
index b2f88c51d1c5..aead9b265217 100644
--- a/docs/configure/integration/frameworks-feature-support.mdx
+++ b/docs/configure/integration/frameworks-feature-support.mdx
@@ -25,7 +25,7 @@ Core frameworks have dedicated maintainers or contributors who are responsible f
 | [Outline](../../essentials/measure-and-outline.mdx#outline-addon)                             | ✅    | ✅    | ✅      | ✅             |
 | **Addons**                                                                                    |       |       |         |                |
 | [A11y](../../writing-tests/accessibility-testing.mdx)                                         | ✅    | ✅    | ✅      | ✅             |
-| [Interactions](../../writing-tests/interaction-testing.mdx)                                   | ✅    | ✅    | ✅      | ✅             |
+| [Component testing](../../writing-tests/component-testing.mdx)                                | ✅    | ✅    | ✅      | ✅             |
 | [Test runner](../../writing-tests/test-runner.mdx)                                            | ✅    | ✅    | ✅      | ✅             |
 | [Test coverage](../../writing-tests/test-coverage.mdx)                                        | ✅    | ✅    | ✅      | ✅             |
 | [CSS resources](https://github.com/storybookjs/addon-cssresources)                            | ✅    | ✅    | ✅      | ✅             |
@@ -75,7 +75,7 @@ Community frameworks have fewer contributors which means they may not be as up t
 | [Outline](../../essentials/measure-and-outline.mdx#outline-addon)                             | ✅    | ✅   | ✅     | ✅     | ✅   | ✅      |
 | **Addons**                                                                                    |       |      |        |        |      |         |
 | [A11y](../../writing-tests/accessibility-testing.mdx)                                         | ✅    | ✅   | ✅     | ✅     | ✅   | ✅      |
-| [Interactions](../../writing-tests/interaction-testing.mdx)                                   |       | ✅   | ✅     | ✅     | ✅   | ✅      |
+| [Component testing](../../writing-tests/component-testing.mdx)                                |       | ✅   | ✅     | ✅     | ✅   | ✅      |
 | [Test runner](../../writing-tests/test-runner.mdx)                                            |       | ✅   | ✅     | ✅     | ✅   | ✅      |
 | [Test coverage](../../writing-tests/test-coverage.mdx)                                        |       | ✅   | ✅     | ✅     | ✅   | ✅      |
 | [CSS resources](https://github.com/storybookjs/addon-cssresources)                            | ✅    | ✅   | ✅     | ✅     | ✅   | ✅      |
diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx
index 7c4099c18364..43033469f701 100644
--- a/docs/essentials/actions.mdx
+++ b/docs/essentials/actions.mdx
@@ -17,7 +17,7 @@ Actions work via supplying special Storybook-generated “action” arguments (r
 
 ### Via @storybook/test fn spy function
 
-The recommended way to write actions is to use the `fn` utility from `@storybook/test` to mock and spy args. This is very useful for writing [interaction tests](../writing-tests/interaction-testing.mdx). You can mock your component's methods by assigning them to the `fn()` function:
+The recommended way to write actions is to use the `fn` utility from `@storybook/test` to mock and spy args. This is very useful for writing [component tests](../writing-tests/component-testing.mdx). You can mock your component's methods by assigning them to the `fn()` function:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/essentials/interactions.mdx b/docs/essentials/interactions.mdx
index 432433d7bf92..237f79c45435 100644
--- a/docs/essentials/interactions.mdx
+++ b/docs/essentials/interactions.mdx
@@ -47,7 +47,7 @@ Now when you run Storybook, the Interactions addon will be enabled.
 
 ![Storybook Interactions installed and registered](../_assets/essentials/addon-interactions-installed-registered.png)
 
-## Write an interaction test
+## Write a component test
 
 Interactions run as part of the `play` function of your stories. We rely on Testing Library to do the heavy lifting.
 
diff --git a/docs/faq.mdx b/docs/faq.mdx
index 220228ff3be8..57c010639e1d 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -218,7 +218,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | Preview and build docs                          | [See current documentation](./writing-docs/build-documentation.mdx)                                  | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
 | Testing          | Visual tests                                    | [See current documentation](./writing-tests/visual-testing.mdx)                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing)                 |
 |                  | Accessibility tests                             | [See current documentation](./writing-tests/accessibility-testing.mdx)                               | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Interaction tests                               | [See current documentation](./writing-tests/interaction-testing.mdx)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing)                                                                                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing)                      |
+|                  | Component tests                                 | [See current documentation](./writing-tests/component-testing.mdx)                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing)                                                                                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing)                      |
 |                  | Snapshot tests                                  | [See current documentation](./writing-tests/snapshot-testing/snapshot-testing.mdx)                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing)                       |
 |                  | Import stories in tests/Unit tests              | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx)       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing)                         |
 |                  | Import stories in tests/End-to-end testing      | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing)                         |
diff --git a/docs/get-started/browse-stories.mdx b/docs/get-started/browse-stories.mdx
index 1246a7070ded..1cf04a1c9be3 100644
--- a/docs/get-started/browse-stories.mdx
+++ b/docs/get-started/browse-stories.mdx
@@ -47,7 +47,7 @@ Addons are plugins that extend Storybook's core functionality. You can find them
 
 * **Controls** allows you to interact with a component’s args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases.
 * **Actions** help you verify interactions produce the correct outputs via callbacks. For instance, if you view the “Logged In” story of the `Header` component, we can verify that clicking the “Log out” button triggers the `onLogout` callback, which would be provided by the component that made use of the Header.
-* **Interactions** provides a helpful user interface for debugging [interaction tests](../writing-tests/interaction-testing.mdx) with the `play` function.
+* **Interactions** provides a helpful user interface for debugging [component tests](../writing-tests/component-testing.mdx) with the `play` function.
 * **Visual Tests** lets you pinpoint UI bugs in your local development environment by providing instant feedback directly in Storybook.
 
 <Video src="../_assets/get-started/addons-walkthrough-optimized.mp4" />
diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx
index 02161411e3ad..e1715fee8a71 100644
--- a/docs/get-started/why-storybook.mdx
+++ b/docs/get-started/why-storybook.mdx
@@ -84,7 +84,7 @@ Isolate components and pages and track their use cases as [stories](../writing-s
 
 **✅ Test UIs with less effort and no flakes**
 
-Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Accessibility](../writing-tests/accessibility-testing.mdx), [Interaction](../writing-tests/interaction-testing.mdx), and [Visual](../writing-tests/visual-testing.mdx) testing. Or use stories as test cases by importing them into other JavaScript testing tools.
+Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Component](../writing-tests/component-testing.mdx), [Accessibility](../writing-tests/accessibility-testing.mdx), and [Visual](../writing-tests/visual-testing.mdx) testing. Or use stories as test cases by [importing them into other JavaScript testing tools](../writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx).
 
 **📚 Document UI for your team to reuse**
 
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 97fce639bc61..ac9013eefadf 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.3.0-beta.0","info":{"plain":"Empty release identical to v8.3.0-alpha.11"}}
+{"version":"8.3.0-beta.1","info":{"plain":"- ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman!\n- Core: Move `util` to regular dependency - [#29008](https://github.com/storybookjs/storybook/pull/29008), thanks @ndelangen!\n- Next.js-Vite: Streamline Next.js dir option - [#28995](https://github.com/storybookjs/storybook/pull/28995), thanks @valentinpalkovic!\n- Next.js: Fix wrong Next.js framework reference - [#28992](https://github.com/storybookjs/storybook/pull/28992), thanks @valentinpalkovic!\n- Vue3: Add vite plugin for portable stories - [#29004](https://github.com/storybookjs/storybook/pull/29004), thanks @yannbf!"}}
diff --git a/docs/writing-docs/index.mdx b/docs/writing-docs/index.mdx
index 8764a25c56fb..6f43864ccd6e 100644
--- a/docs/writing-docs/index.mdx
+++ b/docs/writing-docs/index.mdx
@@ -2,7 +2,7 @@
 title: 'How to document components'
 hideRendererSelector: true
 sidebar:
-  order: 3
+  order: 4
   title: Docs
 ---
 
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index 85cca9ffa13b..739664dd1ba7 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -126,7 +126,7 @@ Here, we define `beforeEach` on a story (which will run before the story is rend
 
 ### Spying on mocked modules
 
-The `fn` utility also spies on the original module's functions, which you can use to assert their behavior in your tests. For example, you can use [interaction tests](../../writing-tests/interaction-testing.mdx) to verify that a function was called with specific arguments.
+The `fn` utility also spies on the original module's functions, which you can use to assert their behavior in your tests. For example, you can use [component tests](../../writing-tests/component-testing.mdx) to verify that a function was called with specific arguments.
 
 For example, this story checks that the `saveNote` function was called when the user clicks the save button:
 
diff --git a/docs/writing-stories/play-function.mdx b/docs/writing-stories/play-function.mdx
index 52c242c4a7ce..eac0bcd4b84a 100644
--- a/docs/writing-stories/play-function.mdx
+++ b/docs/writing-stories/play-function.mdx
@@ -40,7 +40,7 @@ Storybook's `play` functions are small code snippets that run once the story fin
 {/* prettier-ignore-end */}
 
 <Callout variant="info" icon="💡">
-  See the [Interaction testing documentation](../writing-tests/interaction-testing.mdx#api-for-user-events) for an overview of the available API events.
+  See the [component testing documentation](../writing-tests/component-testing.mdx#api-for-user-events) for an overview of the available API events.
 </Callout>
 
 When Storybook finishes rendering the story, it executes the steps defined within the `play` function, interacting with the component and filling the form's information. All of this without the need for user intervention. If you check your `Interactions` panel, you'll see the step-by-step flow.
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index 5942811bfb27..faa147e958c6 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -129,7 +129,7 @@ Add a new [configuration file](./test-runner.mdx#test-hook-api) inside your Stor
   `preVisit` and `postVisit` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.mdx#test-hook-api).
 </Callout>
 
-When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [interaction tests](./interaction-testing.mdx) you might have configured for each component story.
+When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [component tests](./component-testing.mdx) you might have configured for each component story.
 
 It starts checking for issues by traversing the DOM tree starting from the story's root element and generates a detailed report based on the issues it encountered.
 
@@ -163,11 +163,11 @@ Browser-based accessibility tests, like those found in Storybook, evaluate the r
 
 **Learn about other UI tests**
 
-* [Test runner](./test-runner.mdx) to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
 * [Visual tests](./visual-testing.mdx) for appearance
 * Accessibility tests for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
 * [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
 * [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/interaction-testing.mdx b/docs/writing-tests/component-testing.mdx
similarity index 84%
rename from docs/writing-tests/interaction-testing.mdx
rename to docs/writing-tests/component-testing.mdx
index a2ee5908316e..cda397d8de6f 100644
--- a/docs/writing-tests/interaction-testing.mdx
+++ b/docs/writing-tests/component-testing.mdx
@@ -1,11 +1,11 @@
 ---
-title: 'Interaction tests'
+title: 'Component tests'
 sidebar:
-  order: 4
-  title: Interaction tests
+  order: 1
+  title: Component tests
 ---
 
-As you build more complex UIs like pages, components become responsible for more than just rendering the UI. They fetch data and manage state. Interaction tests allow you to verify these functional aspects of UIs.
+As you build more complex UIs like pages, components become responsible for more than just rendering the UI. They fetch data and manage state. Component tests allow you to verify these functional aspects of UIs.
 
 In a nutshell, you start by supplying the appropriate props for the initial state of a component. Then simulate user behavior such as clicks and form entries. Finally, check whether the UI and component state update correctly.
 
@@ -15,16 +15,17 @@ In Storybook, this familiar workflow happens in your browser. That makes it easi
 
 ## How does component testing in Storybook work?
 
-You start by writing a [**story**](../writing-stories/index.mdx) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your interaction tests with the **play** function pass. Additionally, you can automate test execution via the [command line](./test-runner.mdx#cli-options) or in your [CI environment](./test-runner.mdx#set-up-ci-to-run-tests).
+You start by writing a [**story**](../writing-stories/index.mdx) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your component tests with the **play** function pass. The test runner can run via the command line or in CI.
 
 * The [`play`](../writing-stories/play-function.mdx) function is a small snippet of code that runs after a story finishes rendering. You can use this to test user workflows.
 * The test is written using Storybook-instrumented versions of [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/) coming from the [`@storybook/test`](https://npmjs.com/package/@storybook/test) package.
 * [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions/) visualizes the test in Storybook and provides a playback interface for convenient browser-based debugging.
 * [`@storybook/test-runner`](https://github.com/storybookjs/test-runner) is a standalone utility—powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/)—that executes all of your interactions tests and catches broken stories.
+    * The experimental [test runner with Vitest](./test-runner-with-vitest.mdx) is also available, which transforms your stories into Vitest tests and runs them in a browser.
 
 ## Set up the interactions addon
 
-To enable interaction testing with Storybook, you'll need to take additional steps to set it up properly. We recommend you go through the [test runner documentation](./test-runner.mdx) before proceeding with the rest of the required configuration.
+To enable the full component testing experience with Storybook, you'll need to take additional steps to set it up properly. We recommend you go through the [test runner documentation](./test-runner.mdx) before proceeding with the rest of the required configuration.
 
 Run the following command to install the interactions addon and related dependencies.
 
@@ -42,9 +43,9 @@ Update your Storybook configuration (in `.storybook/main.js|ts`) to include the
 
 {/* prettier-ignore-end */}
 
-## Write an interaction test
+## Write a component test
 
-The test itself is defined inside a `play` function connected to a story. Here's an example of how to set up an interaction test with Storybook and the `play` function:
+The test itself is defined inside a `play` function connected to a story. Here's an example of how to set up a component test with Storybook and the `play` function:
 
 {/* prettier-ignore-start */}
 
@@ -198,7 +199,7 @@ Below is an abridged API for user-event. For more, check out the [official user-
 
 ### Assert tests with Vitest's APIs
 
-Storybook’s `@storybook/test` also provides APIs from [Vitest](https://vitest.dev/), such as [`expect`](https://vitest.dev/api/expect.html#expect) and [`vi.fn`](https://vitest.dev/api/vi.html#vi-fn). These APIs improve your testing experience, helping you assert whether a function has been called, if an element exists in the DOM, and much more. If you are used to `expect` from testing packages such as [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/), you can write interaction tests in much the same way.
+Storybook’s `@storybook/test` also provides APIs from [Vitest](https://vitest.dev/), such as [`expect`](https://vitest.dev/api/expect.html#expect) and [`vi.fn`](https://vitest.dev/api/vi.html#vi-fn). These APIs improve your testing experience, helping you assert whether a function has been called, if an element exists in the DOM, and much more. If you are used to `expect` from testing packages such as [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/), you can write component tests in much the same way.
 
 {/* prettier-ignore-start */}
 
@@ -218,7 +219,7 @@ For complex flows, it can be worthwhile to group sets of related interactions to
 
 This will show your interactions nested in a collapsible group:
 
-![Interaction testing with labeled steps](../_assets/writing-tests/storybook-addon-interactions-steps.png)
+![Component testing with labeled steps](../_assets/writing-tests/storybook-addon-interactions-steps.png)
 
 ### Mocked modules
 
@@ -244,13 +245,13 @@ The `play` function is executed after the story is rendered. If there’s an err
 
 Since Storybook is a webapp, anyone with the URL can reproduce the error with the same detailed information without any additional environment configuration or tooling required.
 
-![Interaction testing with a component](../_assets/writing-tests/storybook-addon-interactions-error-optimized.png)
+![Component testing with an error](../_assets/writing-tests/storybook-addon-interactions-error-optimized.png)
 
-Streamline interaction testing further by automatically [publishing Storybook](../sharing/publish-storybook.mdx) in pull requests. That gives teams a universal reference point to test and debug stories.
+Streamline component testing further by automatically [publishing Storybook](../sharing/publish-storybook.mdx) in pull requests. That gives teams a universal reference point to test and debug stories.
 
 ## Execute tests with the test-runner
 
-Storybook only runs the interaction test when you're viewing a story. Therefore, you'd have to go through each story to run all your checks. As your Storybook grows, it becomes unrealistic to review each change manually. Storybook [test-runner](https://github.com/storybookjs/test-runner) automates the process by running all tests for you. To execute the test-runner, open a new terminal window and run the following command:
+Storybook only runs the component test when you're viewing a story. Therefore, you'd have to go through each story to run all your checks. As your Storybook grows, it becomes unrealistic to review each change manually. Storybook [test-runner](https://github.com/storybookjs/test-runner) automates the process by running all tests for you. To execute the test-runner, open a new terminal window and run the following command:
 
 {/* prettier-ignore-start */}
 
@@ -258,7 +259,7 @@ Storybook only runs the interaction test when you're viewing a story. Therefore,
 
 {/* prettier-ignore-end */}
 
-![Interaction test with test runner](../_assets/writing-tests/storybook-interaction-test-runner-loginform-optimized.png)
+![Component test with test runner](../_assets/writing-tests/storybook-interaction-test-runner-loginform-optimized.png)
 
 <Callout variant="info" icon="💡">
   If you need, you can provide additional flags to the test-runner. Read the [documentation](./test-runner.mdx#cli-options) to learn more.
@@ -270,21 +271,21 @@ Once you're ready to push your code into a pull request, you'll want to automati
 
 ## Troubleshooting
 
-#### What’s the difference between interaction tests and visual tests?
+#### What’s the difference between component tests and visual tests?
 
-Interaction tests can be expensive to maintain when applied wholesale to every component. We recommend combining them with other methods like visual testing for comprehensive coverage with less maintenance work.
+Component tests can be expensive to maintain when applied wholesale to every component. We recommend combining them with other methods like visual testing for comprehensive coverage with less maintenance work.
 
-#### What's the difference between interaction tests and using Jest + Testing Library alone?
+#### What's the difference between component tests and using Jest + Testing Library alone?
 
-Interaction tests integrate Jest and Testing Library into Storybook. The biggest benefit is the ability to view the component you're testing in a real browser. That helps you debug visually, instead of getting a dump of the (fake) DOM in the command line or hitting the limitations of how JSDOM mocks browser functionality. It's also more convenient to keep stories and tests together in one file than having them spread across files.
+Component tests integrate Jest and Testing Library into Storybook. The biggest benefit is the ability to view the component you're testing in a real browser. That helps you debug visually, instead of getting a dump of the (fake) DOM in the command line or hitting the limitations of how JSDOM mocks browser functionality. It's also more convenient to keep stories and tests together in one file than having them spread across files.
 
 **Learn about other UI tests**
 
-* [Test runner](./test-runner.mdx) to automate test execution
+* Component tests for user behavior simulation
 * [Visual tests](./visual-testing.mdx) for appearance
 * [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* Interaction tests for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
 * [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
 * [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
 * [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
diff --git a/docs/writing-tests/import-stories-in-tests/index.mdx b/docs/writing-tests/import-stories-in-tests/index.mdx
index c845f373267b..dc51d8da2e83 100644
--- a/docs/writing-tests/import-stories-in-tests/index.mdx
+++ b/docs/writing-tests/import-stories-in-tests/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Import stories in tests
 sidebar:
-  order: 7
+  order: 8
   title: Import stories in tests
 ---
\ No newline at end of file
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
index 77167db0e88a..02a931f44f0d 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
@@ -63,11 +63,11 @@ Once you execute Playwright, it opens a new browser window, loads Storybook's is
 
 #### Learn about other UI tests
 
-* [Test runner](../test-runner.mdx) to automate test execution
+* [Component tests](../component-testing.mdx) for user behavior simulation
 * [Visual tests](../visual-testing.mdx) for appearance
 * [Accessibility tests](../accessibility-testing.mdx) for accessibility
-* [Interaction tests](../interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](../test-coverage.mdx) for measuring code coverage
 * [Snapshot tests](../snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](../test-runner.mdx) to automate test execution
+* [Test coverage](../test-coverage.mdx) for measuring code coverage
 * End-to-end tests for simulating real user scenarios
-* [Unit tests](./stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
index 7d16abf31b5f..d975f910d500 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
@@ -13,7 +13,7 @@ Stories are a practical starting point for UI testing. Import stories into tools
 
 ## Write a test with Testing Library
 
-[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based interaction tests. With [Component Story Format](../../api/csf.mdx), your stories are reusable with Testing Library. Each named export (story) is renderable within your testing setup. For example, if you were working on a login component and wanted to test the invalid credentials scenario, here's how you could write your test:
+[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based component tests. With [Component Story Format](../../api/csf.mdx), your stories are reusable with Testing Library. Each named export (story) is renderable within your testing setup. For example, if you were working on a login component and wanted to test the invalid credentials scenario, here's how you could write your test:
 
 Storybook provides a [`composeStories`](../../api/portable-stories/portable-stories-vitest.mdx#composestories) utility that helps convert stories from a test file into renderable elements that can be reused in your Node tests with JSDOM. It also allows you to apply other Storybook features that you have enabled your project (e.g., [decorators](../../writing-stories/decorators.mdx), [args](../../writing-stories/args.mdx)) into your tests, enabling you to reuse your stories in your testing environment of choice (e.g., [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/)), ensuring your tests are always in sync with your stories without having to rewrite them. This is what we refer to as portable stories in Storybook.
 
@@ -95,11 +95,11 @@ Storybook provides community-led addons for other frameworks like [Vue 2](https:
 
 **Learn about other UI tests**
 
-* [Test runner](../test-runner.mdx) to automate test execution
+* [Component tests](../component-testing.mdx) for user behavior simulation
 * [Visual tests](../visual-testing.mdx) for appearance
 * [Accessibility tests](../accessibility-testing.mdx) for accessibility
-* [Interaction tests](../interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](../test-coverage.mdx) for measuring code coverage
 * [Snapshot tests](../snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](../test-runner.mdx) to automate test execution
+* [Test coverage](../test-coverage.mdx) for measuring code coverage
 * [End-to-end tests](./stories-in-end-to-end-tests.mdx) for simulating real user scenarios
 * Unit tests for functionality
diff --git a/docs/writing-tests/index.mdx b/docs/writing-tests/index.mdx
index 99fd9ae77cc1..e5f0524f7f7b 100644
--- a/docs/writing-tests/index.mdx
+++ b/docs/writing-tests/index.mdx
@@ -2,7 +2,7 @@
 title: 'How to test UIs with Storybook'
 hideRendererSelector: true
 sidebar:
-  order: 4
+  order: 3
   title: Testing
 ---
 
@@ -18,11 +18,11 @@ To test a component in isolation, you often have to mock data, dependencies, or
 
 Storybook also comes with tools, [a test runner](./test-runner.mdx), and handy integrations with the larger JavaScript ecosystem to expand your UI test coverage. These docs detail how you can use Storybook for UI testing.
 
-* [**Test runner**](./test-runner.mdx) to automatically test your entire Storybook and catch broken stories.
-* [**Visual tests**](./visual-testing.mdx) capture a screenshot of every story then compare it against baselines to detect appearance and integration issues
-* [**Accessibility tests**](./accessibility-testing.mdx) catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
-* [**Interaction tests**](./interaction-testing.mdx) verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
-* [**Coverage tests**](./test-coverage.mdx) to measure how much of your code is covered by your tests
-* [**Snapshot tests**](./snapshot-testing/snapshot-testing.mdx) detect changes in the rendered markup to surface rendering errors or warnings
-* [**End-to-end tests**](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
+* [Component tests](./component-testing.mdx) for user behavior simulation
+* [Visual tests](./visual-testing.mdx) for appearance
+* [Accessibility tests](./accessibility-testing.mdx) for accessibility
+* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
+* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
 * [**Unit tests**](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
diff --git a/docs/writing-tests/snapshot-testing/index.mdx b/docs/writing-tests/snapshot-testing/index.mdx
index 6ec310332af2..ba5956875e6a 100644
--- a/docs/writing-tests/snapshot-testing/index.mdx
+++ b/docs/writing-tests/snapshot-testing/index.mdx
@@ -1,6 +1,6 @@
 ---
-title: Snapshot testing
+title: Snapshot tests
 sidebar:
-  order: 6
-  title: Snapshot testing
+  order: 4
+  title: Snapshot tests
 ---
\ No newline at end of file
diff --git a/docs/writing-tests/snapshot-testing/snapshot-testing.mdx b/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
index bc9ca5b12225..c6ec1cc516e9 100644
--- a/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
+++ b/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
@@ -1,5 +1,5 @@
 ---
-title: 'Write snapshot tests'
+title: 'Snapshot tests'
 ---
 
 Snapshot tests compare the rendered markup of every story against known baselines. It’s a way to identify markup changes that trigger rendering errors and warnings.
@@ -14,7 +14,7 @@ Storybook is a helpful tool for snapshot testing because every story is essentia
 
 ## Automate snapshot tests with the test-runner
 
-Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including interaction testing with the [play function](../interaction-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
+Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including component testing with the [play function](../component-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
 
 ### Setup
 
@@ -130,11 +130,11 @@ Visual tests capture images of stories and compare them against image baselines.
 
 #### Learn about other UI tests
 
-* [Test runner](../test-runner.mdx) to automate test execution
+* [Component tests](../component-testing.mdx) for user behavior simulation
 * [Visual tests](../visual-testing.mdx) for appearance
 * [Accessibility tests](../accessibility-testing.mdx) for accessibility
-* [Interaction tests](../interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](../test-coverage.mdx) for measuring code coverage
 * Snapshot tests for rendering errors and warnings
+* [Test runner](../test-runner.mdx) to automate test execution
+* [Test coverage](../test-coverage.mdx) for measuring code coverage
 * [End-to-end tests](../import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](../import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](../import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx b/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
index 7c4e5ec96847..692b83e94201 100644
--- a/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
+++ b/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
@@ -25,7 +25,7 @@ Before you begin the migration process, ensure that you have:
 
 ### With the test-runner
 
-Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including interaction testing with the [play function](../interaction-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
+Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including component testing with the [play function](../component-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
 
 #### Setup
 
diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index 63ae072264eb..7ac1d95f7bf1 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Test coverage'
 sidebar:
-  order: 5
+  order: 7
   title: Test coverage
 ---
 
@@ -133,11 +133,11 @@ As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverag
 
 **Learn about other UI tests**
 
-* [Test runner](./test-runner.mdx) to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
 * [Visual tests](./visual-testing.mdx) for appearance
 * [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* Coverage tests for measuring code coverage
 * [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* Test coverage for measuring code coverage
 * [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/test-runner.mdx b/docs/writing-tests/test-runner.mdx
index 57741b141077..ac1fd7b7d3ba 100644
--- a/docs/writing-tests/test-runner.mdx
+++ b/docs/writing-tests/test-runner.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Test runner'
 sidebar:
-  order: 1
+  order: 5
   title: Test runner
 ---
 
@@ -150,12 +150,12 @@ You can use your CI provider (for example, [GitHub Actions](https://github.com/f
 
 The test-runner is a generic testing tool that can run locally or on CI and be configured or extended to run all kinds of tests.
 
-[Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) is a cloud-based service that runs [visual](./visual-testing.mdx) and [interaction tests](./interaction-testing.mdx) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
+[Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) is a cloud-based service that runs [visual](./visual-testing.mdx) and [component tests](./component-testing.mdx) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
 
 However, you might want to pair the test runner and Chromatic in some cases.
 
 * Use it locally and Chromatic on your CI.
-* Use Chromatic for visual and interaction tests and run other custom tests using the test runner.
+* Use Chromatic for visual and component tests and run other custom tests using the test runner.
 
 ## Advanced configuration
 
@@ -368,11 +368,11 @@ This is due to the test-runner using the community-maintained package [jest-play
 
 **Learn about other UI tests**
 
-* Test runner to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
 * [Visual tests](./visual-testing.mdx) for appearance
 * [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
 * [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* Test runner to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
 * [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/visual-testing.mdx b/docs/writing-tests/visual-testing.mdx
index 33288d79a7f0..71765a828ccd 100644
--- a/docs/writing-tests/visual-testing.mdx
+++ b/docs/writing-tests/visual-testing.mdx
@@ -112,11 +112,11 @@ Visual tests compare the rendered pixels of every story against known baselines.
 
 **Learn about other UI tests**
 
-* [Test runner](./test-runner.mdx) to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
 * Visual tests for appearance
 * [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
 * [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
 * [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 6432bf2d2f2d..34c7e20c0606 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/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({ fileName: 'main', 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({ fileName: 'main', 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'));
 
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index b650c80df276..2bb4e6e3999c 100644
--- a/scripts/tasks/sandbox.ts
+++ b/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}`);
diff --git a/scripts/utils/main-js.ts b/scripts/utils/main-js.ts
index fa117008afc5..4026434c75d4 100644
--- a/scripts/utils/main-js.ts
+++ b/scripts/utils/main-js.ts
@@ -4,9 +4,9 @@ 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, cwd }: { fileName: string; cwd: string }) {
   const configDir = join(cwd, '.storybook');
   if (!existsSync(configDir)) {
     throw new Error(
@@ -14,8 +14,8 @@ export async function readMainConfig({ cwd }: { cwd: string }) {
     );
   }
 
-  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[]) {