diff --git a/docs/angular/api-storybook/executors/storybook.md b/docs/angular/api-storybook/executors/storybook.md
index 37c8d705a8375..3f66e8753d784 100644
--- a/docs/angular/api-storybook/executors/storybook.md
+++ b/docs/angular/api-storybook/executors/storybook.md
@@ -12,7 +12,7 @@ Default: `@storybook/angular`
 
 Type: `string`
 
-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`
 
 Storybook framework npm package
 
diff --git a/docs/node/api-storybook/executors/storybook.md b/docs/node/api-storybook/executors/storybook.md
index fd3f544f1c55c..735bcbe379da9 100644
--- a/docs/node/api-storybook/executors/storybook.md
+++ b/docs/node/api-storybook/executors/storybook.md
@@ -13,7 +13,7 @@ Default: `@storybook/angular`
 
 Type: `string`
 
-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`
 
 Storybook framework npm package
 
diff --git a/docs/react/api-storybook/executors/storybook.md b/docs/react/api-storybook/executors/storybook.md
index fd3f544f1c55c..735bcbe379da9 100644
--- a/docs/react/api-storybook/executors/storybook.md
+++ b/docs/react/api-storybook/executors/storybook.md
@@ -13,7 +13,7 @@ Default: `@storybook/angular`
 
 Type: `string`
 
-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`
 
 Storybook framework npm package
 
diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json
index 1c0590eba5ad4..02d4cf072f395 100644
--- a/packages/storybook/src/executors/storybook/schema.json
+++ b/packages/storybook/src/executors/storybook/schema.json
@@ -12,7 +12,8 @@
         "@storybook/react",
         "@storybook/html",
         "@storybook/web-components",
-        "@storybook/vue"
+        "@storybook/vue",
+        "@storybook/vue3"
       ],
       "default": "@storybook/angular",
       "hidden": true
diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts
index 5f20b068f5c84..0ec872953ca83 100644
--- a/packages/storybook/src/executors/storybook/storybook.impl.ts
+++ b/packages/storybook/src/executors/storybook/storybook.impl.ts
@@ -21,7 +21,8 @@ export interface StorybookExecutorOptions {
     | '@storybook/react'
     | '@storybook/html'
     | '@storybook/web-components'
-    | '@storybook/vue';
+    | '@storybook/vue'
+    | '@storybook/vue3';
   projectBuildConfig?: string;
   config: StorybookConfig;
   host?: string;
diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts
index 68fa2ed7b8b39..3377e2a280b6e 100644
--- a/packages/storybook/src/executors/utils.ts
+++ b/packages/storybook/src/executors/utils.ts
@@ -13,6 +13,7 @@ export function getStorybookFrameworkPath(uiFramework) {
     '@storybook/react': '@storybook/react/dist/cjs/server/options',
     '@storybook/html': '@storybook/html/dist/cjs/server/options',
     '@storybook/vue': '@storybook/vue/dist/cjs/server/options',
+    '@storybook/vue3': '@storybook/vue3/dist/cjs/server/options',
     '@storybook/web-components"':
       '@storybook/web-components"/dist/cjs/server/options',
   };
diff --git a/packages/storybook/src/generators/init/init.spec.ts b/packages/storybook/src/generators/init/init.spec.ts
index 805a40769d1da..e897a8b8a4a3c 100644
--- a/packages/storybook/src/generators/init/init.spec.ts
+++ b/packages/storybook/src/generators/init/init.spec.ts
@@ -165,7 +165,7 @@ describe('@nrwl/storybook:init', () => {
     expect(packageJson.devDependencies['@storybook/vue']).not.toBeDefined();
   });
 
-  it('should add vue related dependencies when using html as uiFramework', async () => {
+  it('should add vue related dependencies when using vue as uiFramework', async () => {
     const existing = 'existing';
     const existingVersion = '1.0.0';
     addDependenciesToPackageJson(
@@ -208,6 +208,52 @@ describe('@nrwl/storybook:init', () => {
     expect(packageJson.devDependencies['@storybook/vue']).toBeDefined();
   });
 
+  it('should add vue3 related dependencies when using vue3 as uiFramework', async () => {
+    const existing = 'existing';
+    const existingVersion = '1.0.0';
+    addDependenciesToPackageJson(
+      tree,
+      { '@nrwl/storybook': storybookVersion, [existing]: existingVersion },
+      { [existing]: existingVersion }
+    );
+    await initGenerator(tree, {
+      uiFramework: '@storybook/vue3',
+    });
+    const packageJson = readJson(tree, 'package.json');
+
+    // general deps
+    expect(packageJson.devDependencies['@nrwl/storybook']).toBeDefined();
+    expect(packageJson.dependencies['@nrwl/storybook']).toBeUndefined();
+    expect(packageJson.dependencies[existing]).toBeDefined();
+    expect(packageJson.devDependencies[existing]).toBeDefined();
+    expect(
+      packageJson.devDependencies['@storybook/addon-essentials']
+    ).toBeDefined();
+
+    // react specific
+    expect(packageJson.devDependencies['@storybook/react']).not.toBeDefined();
+    expect(packageJson.devDependencies['@babel/core']).not.toBeDefined();
+    expect(packageJson.devDependencies['babel-loader']).not.toBeDefined();
+
+    // angular specific
+    expect(packageJson.devDependencies['@storybook/angular']).not.toBeDefined();
+    expect(packageJson.devDependencies['@angular/forms']).not.toBeDefined();
+
+    // generic html specific
+    expect(packageJson.devDependencies['@storybook/html']).not.toBeDefined();
+
+    // generic vue specific
+    expect(packageJson.devDependencies['@storybook/vue']).not.toBeDefined();
+
+    // generic web-components specific
+    expect(
+      packageJson.devDependencies['@storybook/web-components']
+    ).not.toBeDefined();
+
+    // generic vue3 specific
+    expect(packageJson.devDependencies['@storybook/vue3']).toBeDefined();
+  });
+
   it('should add build-storybook to cacheable operations', async () => {
     await initGenerator(tree, {
       uiFramework: '@storybook/html',
@@ -237,4 +283,14 @@ describe('@nrwl/storybook:init', () => {
       nxJson.tasksRunnerOptions.default.options.cacheableOperations
     ).toContain('build-storybook');
   });
+
+  it('should add build-storybook to cacheable operations for vue3', async () => {
+    await initGenerator(tree, {
+      uiFramework: '@storybook/vue3',
+    });
+    const nxJson = readJson(tree, 'nx.json');
+    expect(
+      nxJson.tasksRunnerOptions.default.options.cacheableOperations
+    ).toContain('build-storybook');
+  });
 });
diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts
index 81b1a3fa8e499..7f3f08a1afba8 100644
--- a/packages/storybook/src/generators/init/init.ts
+++ b/packages/storybook/src/generators/init/init.ts
@@ -95,6 +95,10 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
     devDependencies['@storybook/vue'] = storybookVersion;
   }
 
+  if (isFramework('vue3', schema)) {
+    devDependencies['@storybook/vue3'] = storybookVersion;
+  }
+
   if (isFramework('web-components', schema)) {
     devDependencies['@storybook/web-components'] = storybookVersion;
   }
diff --git a/packages/storybook/src/generators/init/schema.d.ts b/packages/storybook/src/generators/init/schema.d.ts
index 8bee81e603d33..60a8f9112ef23 100644
--- a/packages/storybook/src/generators/init/schema.d.ts
+++ b/packages/storybook/src/generators/init/schema.d.ts
@@ -4,5 +4,6 @@ export interface Schema {
     | '@storybook/react'
     | '@storybook/html'
     | '@storybook/web-components'
-    | '@storybook/vue';
+    | '@storybook/vue'
+    | '@storybook/vue3';
 }
diff --git a/packages/storybook/src/generators/init/schema.json b/packages/storybook/src/generators/init/schema.json
index 194eb8e685e39..a2af50a013f85 100644
--- a/packages/storybook/src/generators/init/schema.json
+++ b/packages/storybook/src/generators/init/schema.json
@@ -12,7 +12,8 @@
         "@storybook/react",
         "@storybook/html",
         "@storybook/web-components",
-        "@storybook/vue"
+        "@storybook/vue",
+        "@storybook/vue3"
       ],
       "x-prompt": "What UI framework plugin should storybook use?"
     }
diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts
index a95c882ee941c..69c1647399a4d 100644
--- a/packages/storybook/src/utils/utilities.ts
+++ b/packages/storybook/src/utils/utilities.ts
@@ -16,6 +16,7 @@ export const Constants = {
     html: '@storybook/html',
     'web-components': '@storybook/web-components',
     vue: '@storybook/vue',
+    vue3: '@storybook/vue3',
   } as const,
 };
 type Constants = typeof Constants;
@@ -49,6 +50,10 @@ export function isFramework(
     return true;
   }
 
+  if (type === 'vue3' && schema.uiFramework === '@storybook/vue3') {
+    return true;
+  }
+
   return false;
 }