Add web-components-vite framework doc

code/frameworks/web-components-vite/README.md

@@ -1 +1,3 @@
-# Storybook for Web components
+# Storybook for Web components & Vite
+
+See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more.

docs/get-started/web-components-vite.md

@@ -0,0 +1,128 @@
+---
+title: Storybook for Web components & Vite
+---
+
+export const SUPPORTED_RENDERER = 'web-components';
+
+Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
+
+<If notRenderer={SUPPORTED_RENDERER}>
+
+<Callout variant="info">
+
+Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects.
+
+</Callout>
+
+<!-- End non-supported renderers -->
+
+</If>
+
+<If renderer={SUPPORTED_RENDERER}>
+
+## Requirements
+
+- Vite ≥ 3.0 (4+ recommended)
+- Storybook ≥ 7.0
+
+## Getting started
+
+### In a project without Storybook
+
+Follow the prompts after running this command in your Web components project's root directory:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'common/init-command.npx.js.mdx',
+   'common/init-command.yarn.js.mdx',
+   'common/init-command.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+[More on getting started with Storybook.](./install.md)
+
+### In a project with Storybook
+
+This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-upgrade.npm.js.mdx',
+    'common/storybook-upgrade.pnpm.js.mdx',
+    'common/storybook-upgrade.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### Automatic migration
+
+When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
+
+#### Manual migration
+
+First, install the framework:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'web-components/web-components-vite-install.npm.js.mdx',
+    'web-components/web-components-vite-install.pnpm.js.mdx',
+    'web-components/web-components-vite-install.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Then, update your `.storybook/main.js|ts` to change the framework property:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'web-components/web-components-vite-add-framework.js.mdx',
+    'web-components/web-components-vite-add-framework.ts.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## API
+
+### Options
+
+You can pass an options object for additional configuration if needed:
+
+```js
+// .storybook/main.js
+import * as path from 'path';
+
+export default {
+  // ...
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+The available options are:
+
+#### `builder`
+
+Type: `Record<string, any>`
+
+Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
+
+<!-- End supported renderers -->
+
+</If>

docs/snippets/web-components/web-components-vite-add-framework.js.mdx

@@ -0,0 +1,7 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  framework: '@storybook/web-components-vite', // 👈 Add this
+};
+```

docs/snippets/web-components/web-components-vite-add-framework.ts.mdx

@@ -0,0 +1,11 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  // ...
+  framework: '@storybook/web-components-vite', // 👈 Add this
+};
+
+export default config;
+```

docs/snippets/web-components/web-components-vite-install.npm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/web-components-vite
+```

docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+pnpm install --save-dev @storybook/web-components-vite
+```

docs/snippets/web-components/web-components-vite-install.yarn.js.mdx

@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/web-components-vite
+```

docs/toc.js

@@ -28,6 +28,11 @@ module.exports = {
               title: 'Next.js',
               type: 'link',
             },
+            {
+              pathSegment: 'web-components-vite',
+              title: 'Web components & Vite',
+              type: 'link',
+            },
           ],
         },
         {