From 28f3c61fdee1b516c0d6ba71d066d9b05081ac79 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Sat, 11 Feb 2023 12:47:11 +0100
Subject: [PATCH] docs: fix documentation for global vue3 instance handling

---
 code/frameworks/vue-vite/README.md      |  4 +--
 code/frameworks/vue-webpack5/README.md  |  4 +--
 code/frameworks/vue3-vite/README.md     | 45 ++++++++++++++++++++++++-
 code/frameworks/vue3-webpack5/README.md | 19 ++++++-----
 4 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/code/frameworks/vue-vite/README.md b/code/frameworks/vue-vite/README.md
index 60aad7efd48..1d4c9cb9add 100644
--- a/code/frameworks/vue-vite/README.md
+++ b/code/frameworks/vue-vite/README.md
@@ -1,6 +1,6 @@
-# Storybook for Vue and Vite
+# Storybook for Vue 2 and Vite
 
-Storybook for Vue is a UI development environment for your Vue components.
+Storybook for Vue 2 is a UI development environment for your Vue 2 components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
 ![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
diff --git a/code/frameworks/vue-webpack5/README.md b/code/frameworks/vue-webpack5/README.md
index e9ddd06ffa9..38ea1a0f762 100644
--- a/code/frameworks/vue-webpack5/README.md
+++ b/code/frameworks/vue-webpack5/README.md
@@ -1,6 +1,6 @@
-# Storybook for Vue
+# Storybook for Vue 3 and Webpack
 
-Storybook for Vue is a UI development environment for your Vue components.
+Storybook for Vue 3 is a UI development environment for your Vue 3 components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
 ![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
diff --git a/code/frameworks/vue3-vite/README.md b/code/frameworks/vue3-vite/README.md
index e8a35450aec..645c1aa6454 100644
--- a/code/frameworks/vue3-vite/README.md
+++ b/code/frameworks/vue3-vite/README.md
@@ -1 +1,44 @@
-# Storybook for React
+# Storybook for Vue 3 and Vite
+
+Storybook for Vue 3 is a UI development environment for your Vue 3 components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-vue3-app
+npx storybook init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+
+## Extending the Vue application
+
+Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
+When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
+
+Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
+
+```js
+// .storybook/preview.js
+
+import { setup } from '@storybook/vue3';
+
+setup((app) => {
+  app.use(MyPlugin);
+  app.component('my-component', MyComponent);
+  app.mixin({
+    /* My mixin */
+  });
+});
+```
diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md
index 8ce5b4dafb8..7c2d6e69954 100644
--- a/code/frameworks/vue3-webpack5/README.md
+++ b/code/frameworks/vue3-webpack5/README.md
@@ -1,4 +1,4 @@
-# Storybook for Vue 3
+# Storybook for Vue 3 and Webpack
 
 Storybook for Vue 3 is a UI development environment for your Vue 3 components.
 With it, you can visualize different states of your UI components and develop them interactively.
@@ -24,20 +24,21 @@ You can also build a [static version](https://storybook.js.org/docs/vue/sharing/
 
 ## Extending the Vue application
 
-Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview which can be imported as `import { app } from '@storybook/vue3'`.
-
+Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
 When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
 
-For example:
+Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
 
 ```js
 // .storybook/preview.js
 
-import { app } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 
-app.use(MyPlugin);
-app.component('my-component', MyComponent);
-app.mixin({
-  /* My mixin */
+setup((app) => {
+  app.use(MyPlugin);
+  app.component('my-component', MyComponent);
+  app.mixin({
+    /* My mixin */
+  });
 });
 ```