diff --git a/packages/vue/src/generators/stories/lib/component-story.ts b/packages/vue/src/generators/stories/lib/component-story.ts
index de91aafdbbbf0e..fcc89166fee209 100644
--- a/packages/vue/src/generators/stories/lib/component-story.ts
+++ b/packages/vue/src/generators/stories/lib/component-story.ts
@@ -1,17 +1,15 @@
+import { parse } from 'path';
 import {
   generateFiles,
   getProjects,
   joinPathFragments,
+  names,
   normalizePath,
   Tree,
 } from '@nx/devkit';
 import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
 import { StorybookStoriesSchema } from '../stories';
-import {
-  camelCase,
-  createDefautPropsObject,
-  getDefinePropsObject,
-} from './utils';
+import { createDefaultPropsObject, getDefinePropsObject } from './utils';
 
 let tsModule: typeof import('typescript');
 
@@ -28,16 +26,8 @@ export function createComponentStories(
 
   const componentFilePath = joinPathFragments(sourceRoot, componentPath);
 
-  const componentDirectory = componentFilePath.replace(
-    componentFilePath.slice(componentFilePath.lastIndexOf('/')),
-    ''
-  );
-
-  const componentFileName = componentFilePath
-    .slice(componentFilePath.lastIndexOf('/') + 1)
-    .replace('.vue', '');
-
-  const name = componentFileName;
+  const { name: componentFileName, dir: componentDirectory } =
+    parse(componentFilePath);
   const contents = host.read(componentFilePath, 'utf-8');
   const propsObject = getDefinePropsObject(contents);
 
@@ -47,10 +37,10 @@ export function createComponentStories(
     normalizePath(componentDirectory),
     {
       tmpl: '',
-      componentFileName: name,
-      componentImportFileName: `${name}.vue`,
-      props: createDefautPropsObject(propsObject),
-      componentName: camelCase(name),
+      componentFileName: componentFileName,
+      componentImportFileName: `${componentFileName}.vue`,
+      props: createDefaultPropsObject(propsObject),
+      componentName: names(componentFileName).propertyName,
       interactionTests,
     }
   );
diff --git a/packages/vue/src/generators/stories/lib/utils.ts b/packages/vue/src/generators/stories/lib/utils.ts
index 61a9dcd1be8a78..8b98d7f69898a9 100644
--- a/packages/vue/src/generators/stories/lib/utils.ts
+++ b/packages/vue/src/generators/stories/lib/utils.ts
@@ -1,37 +1,24 @@
-export function camelCase(input: string): string {
-  if (input.indexOf('-') > 1) {
-    return input
-      .toLowerCase()
-      .replace(/-(.)/g, (_match, group1) => group1.toUpperCase())
-      .replace('.', '');
-  } else {
-    return input;
-  }
-}
-
-export function createDefautPropsObject(propsObject: {
+export function createDefaultPropsObject(propsObject: {
   [key: string]: string;
 }): {
   name: string;
   defaultValue: any;
 }[] {
   const props = [];
-  for (const key in propsObject) {
-    if (Object.prototype.hasOwnProperty.call(propsObject, key)) {
-      let defaultValueOfProp;
-      const element = propsObject[key];
-      if (element === 'string') {
-        defaultValueOfProp = `'${key}'`;
-      } else if (element === 'boolean') {
-        defaultValueOfProp = false;
-      } else if (element === 'number') {
-        defaultValueOfProp = 0;
-      }
-      props.push({
-        name: key,
-        defaultValue: defaultValueOfProp,
-      });
+  for (const key of Object.keys(propsObject)) {
+    let defaultValueOfProp: string | boolean | number;
+    const element = propsObject[key];
+    if (element === 'string') {
+      defaultValueOfProp = `'${key}'`;
+    } else if (element === 'boolean') {
+      defaultValueOfProp = false;
+    } else if (element === 'number') {
+      defaultValueOfProp = 0;
     }
+    props.push({
+      name: key,
+      defaultValue: defaultValueOfProp,
+    });
   }
   return props;
 }
diff --git a/packages/vue/src/generators/stories/stories.lib.spec.ts b/packages/vue/src/generators/stories/stories.lib.spec.ts
index 5b58dd3d40a9a7..c1eb5f5fd2ff1b 100644
--- a/packages/vue/src/generators/stories/stories.lib.spec.ts
+++ b/packages/vue/src/generators/stories/stories.lib.spec.ts
@@ -1,10 +1,10 @@
-import { Tree } from '@nx/devkit';
+import { readJson, Tree } from '@nx/devkit';
 import storiesGenerator from './stories';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { Linter } from '@nx/linter';
 import libraryGenerator from '../library/library';
 
-const componentContent = `<script setup lang="ts">
+const componentContent = `<script setup lang='ts'>
 defineProps<{
   name: string;
   displayAge: boolean;
@@ -51,7 +51,7 @@ describe('vue:stories for libraries', () => {
       )
     ).toMatchSnapshot();
 
-    const packageJson = JSON.parse(appTree.read('package.json', 'utf-8'));
+    const packageJson = readJson(appTree, 'package.json');
     expect(
       packageJson.devDependencies['@storybook/addon-interactions']
     ).toBeDefined();
@@ -75,7 +75,7 @@ describe('vue:stories for libraries', () => {
         'utf-8'
       )
     ).toMatchSnapshot();
-    const packageJson = JSON.parse(appTree.read('package.json', 'utf-8'));
+    const packageJson = readJson(appTree, 'package.json');
     expect(
       packageJson.devDependencies['@storybook/addon-interactions']
     ).toBeUndefined();