diff --git a/.storybook/main.js b/.storybook/main.js
index b1acdfd81a6d397160c664effff5b8d8516db183..dcfc7093caa1e3d2b0573df3aeeeda45e8d04b91 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -20,6 +20,14 @@ export default {
     },
   },
   stories: STORIES ? STORIES.split(',') : ['../src/**/*.stories.js'],
+  env: (config) => {
+    console.log('config', config);
+    console.log(process.env);
+    return {
+      ...config,
+      VUE_VERSION: config.STORYBOOK_VUE_VERSION || false,
+    };
+  },
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
diff --git a/package.json b/package.json
index d91888fc4e947fb12fb0ec934c3e5959cc8ee5d3..4b1c329e84e43f85ba30fb2ad15a9e2e829bc43c 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
     "start": "yarn storybook",
     "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook:prepare && STORYBOOK_VUE_VERSION=3 VUE_APP_VUE_VERSION=3 VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook:prepare": "run-s copy-fonts build-tokens",
     "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
     "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
diff --git a/src/components/base/toggle/toggle.stories.js b/src/components/base/toggle/toggle.stories.js
index 9ff6bbe1fc2b983c903636f846160d7afc314e50..8167adb68bacfe6ae9e6bb56403978a7f71d4fcb 100644
--- a/src/components/base/toggle/toggle.stories.js
+++ b/src/components/base/toggle/toggle.stories.js
@@ -1,5 +1,6 @@
 import { toggleLabelPosition } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
+import { USE_VUE_3 } from '../../../../use_vue3';
 import GlToggle from './toggle.vue';
 import readme from './toggle.md';
 
@@ -31,9 +32,23 @@ const generateProps = ({
   labelPosition,
 });
 
-const Template = (args, { argTypes }) => ({
+const Vue2Template = (args, { argTypes }) => ({
   components: { GlToggle },
   props: Object.keys(argTypes),
+  template: `
+    <div class="gl-text-base">
+      <gl-toggle
+        v-model="localValue"
+        :disabled="disabled"
+        :description="description"
+        :help="help"
+        :label-id="labelId"
+        :is-loading="isLoading"
+        :label="label"
+        :label-position="labelPosition"
+      />
+    </div>
+  `,
   data() {
     return {
       localValue: this.value,
@@ -44,21 +59,25 @@ const Template = (args, { argTypes }) => ({
       this.localValue = newValue;
     },
   },
+});
+
+const Vue3Template = (args, { argTypes }) => ({
+  components: { GlToggle },
+  props: Object.keys(argTypes),
   template: `
-  <div class="gl-text-base">
-    <gl-toggle
-      v-model="localValue"
-      :disabled="disabled"
-      :description="description"
-      :help="help"
-      :label-id="labelId"
-      :is-loading="isLoading"
-      :label="label"
-      :label-position="labelPosition"
-    />
-  </div>`,
+    <div class="gl-text-base">
+      <gl-toggle
+        v-bind="args"
+      />
+    </div>
+  `,
+  setup() {
+    return { args };
+  },
 });
 
+const Template = USE_VUE_3 ? Vue3Template : Vue2Template;
+
 export const Default = Template.bind({});
 Default.args = generateProps();