CLI: Re-Add Nuxt support

code/core/scripts/helpers/sourcefiles.ts

@@ -55,7 +55,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'react-rsbuild', 'vue3-rsbuild'];
+  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild'];
   const location = join(__dirname, '..', '..', 'src', 'types', 'modules', 'frameworks.ts');
   const frameworksDirectory = join(__dirname, '..', '..', '..', 'frameworks');
 

code/core/src/cli/detect.test.ts

@@ -46,6 +46,28 @@ const MOCK_FRAMEWORK_FILES: {
       },
     },
   },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          nuxt: '^3.11.2',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          // Nuxt projects may have Vue 3 as an explicit dependency
+          nuxt: '^3.11.2',
+          vue: '^3.0.0',
+        },
+      },
+    },
+  },
   {
     name: ProjectType.VUE3,
     files: {
@@ -438,16 +460,6 @@ describe('Detect', () => {
       expect(result).toBe(ProjectType.UNDETECTED);
     });
 
-    // TODO(blaine): Remove once Nuxt3 is supported
-    it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => {
-      const result = detectFrameworkPreset({
-        dependencies: {
-          nuxt: '3.0.0',
-        },
-      });
-      expect(result).toBe(ProjectType.UNSUPPORTED);
-    });
-
     // TODO: The mocking in this test causes tests after it to fail
     it('REACT_SCRIPTS for custom react scripts config', () => {
       const forkedReactScriptsConfig = {

code/core/src/cli/detect.ts

@@ -123,7 +123,11 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   }
 
   // REWORK
-  if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
+  if (
+    webpackConfig ||
+    ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
+      dependencies.vite !== undefined)
+  ) {
     commandLog('Detected webpack project. Setting builder to webpack')();
     return CoreBuilder.Webpack5;
   }
@@ -136,6 +140,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
     case ProjectType.NEXTJS:
     case ProjectType.EMBER:
       return CoreBuilder.Webpack5;
+    case ProjectType.NUXT:
+      return CoreBuilder.Vite;
     default:
       const { builder } = await prompts(
         {
@@ -205,6 +211,13 @@ export async function detectLanguage(packageManager: JsPackageManager) {
     } else if (semver.lt(typescriptVersion, '3.8.0')) {
       logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples');
     }
+  } else {
+    // No direct dependency on TypeScript, but could be a transitive dependency
+    // This is eg the case for Nuxt projects, which support a recent version of TypeScript
+    // Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+    if (existsSync('tsconfig.json')) {
+      language = SupportedLanguage.TYPESCRIPT_4_9;
+    }
   }
 
   return language;

code/core/src/cli/helpers.ts

@@ -153,6 +153,7 @@ export const frameworkToDefaultBuilder: Record<
   'html-vite': CoreBuilder.Vite,
   'html-webpack5': CoreBuilder.Webpack5,
   nextjs: CoreBuilder.Webpack5,
+  nuxt: CoreBuilder.Vite,
   'experimental-nextjs-vite': CoreBuilder.Vite,
   'preact-vite': CoreBuilder.Vite,
   'preact-webpack5': CoreBuilder.Webpack5,

code/core/src/cli/project_types.ts

@@ -24,6 +24,7 @@ export type ExternalFramework = {
 export const externalFrameworks: ExternalFramework[] = [
   { name: 'qwik', packageName: 'storybook-framework-qwik' },
   { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' },
+  { name: 'nuxt', packageName: '@storybook-vue/nuxt' },
 ];
 
 /** @deprecated Please use `SupportedFrameworks` from `@storybook/types` instead */
@@ -51,6 +52,7 @@ export enum ProjectType {
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',
   VUE3 = 'VUE3',
+  NUXT = 'NUXT',
   ANGULAR = 'ANGULAR',
   EMBER = 'EMBER',
   WEB_COMPONENTS = 'WEB_COMPONENTS',
@@ -120,6 +122,13 @@ export type TemplateConfiguration = {
  * specific.
  */
 export const supportedTemplates: TemplateConfiguration[] = [
+  {
+    preset: ProjectType.NUXT,
+    dependencies: ['nuxt'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies?.every(Boolean) ?? true;
+    },
+  },
   {
     preset: ProjectType.VUE3,
     dependencies: {
@@ -241,10 +250,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
 // users an "Unsupported framework" message
 export const unsupportedTemplate: TemplateConfiguration = {
   preset: ProjectType.UNSUPPORTED,
-  dependencies: {
-    // TODO(blaine): Remove when we support Nuxt 3
-    nuxt: (versionRange) => eqMajor(versionRange, 3),
-  },
+  dependencies: {},
   matcherFunction: ({ dependencies }) => {
     return dependencies?.some(Boolean) ?? false;
   },

code/core/src/common/utils/framework-to-renderer.ts

@@ -24,6 +24,7 @@ export const frameworkToRenderer: Record<
   sveltekit: 'svelte',
   'vue3-vite': 'vue3',
   'vue3-webpack5': 'vue3',
+  nuxt: 'vue3',
   'web-components-vite': 'web-components',
   'web-components-webpack5': 'web-components',
   'react-rsbuild': 'react',

code/core/src/types/modules/frameworks.ts

@@ -20,5 +20,6 @@ export type SupportedFrameworks =
   | 'web-components-webpack5'
   | 'qwik'
   | 'solid'
+  | 'nuxt'
   | 'react-rsbuild'
   | 'vue3-rsbuild';

code/core/src/types/modules/renderers.ts

@@ -11,4 +11,5 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid';
+  | 'solid'
+  | 'nuxt';

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -349,6 +349,17 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'nuxt-vite/default-ts': {
+    name: 'Nuxt v3 (Vite | TypeScript)',
+    script: 'npx nuxi init --packageManager yarn --gitInit false {{beforeDir}}',
+    inDevelopment: true,
+    expected: {
+      framework: '@storybook-vue/nuxt',
+      renderer: '@storybook/vue3',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'html-webpack/default': {
     name: 'HTML Latest (Webpack | JavaScript)',
     script: 'yarn create webpack5-html {{beforeDir}}',
@@ -717,6 +728,7 @@ export const normal: TemplateKey[] = [
   'react-vite/default-ts',
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
+  'nuxt/v3-vite',
   'lit-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',

code/lib/cli/package.json

@@ -314,7 +314,8 @@
   ],
   "scripts": {
     "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+    "prep": "jiti ../../../scripts/prepare/bundle.ts",
+    "sb": "node ./bin/index.js"
   },
   "dependencies": {
     "@storybook/core": "workspace:*"

code/lib/create-storybook/src/generators/NUXT/index.ts

@@ -0,0 +1,31 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    options,
+    'nuxt',
+    {
+      extraPackages: async ({ builder }) => {
+        return ['@nuxtjs/storybook'];
+      },
+      installFrameworkPackages: false,
+      componentsDestinationPath: './components',
+      extraMain: {
+        stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+      },
+    },
+    'nuxt'
+  );
+  // Add nuxtjs/storybook to nuxt.config.js
+  await packageManager.runPackageCommand('nuxi', [
+    'module',
+    'add',
+    '@nuxtjs/storybook',
+    '--skipInstall',
+  ]);
+};
+
+export default generator;

code/lib/create-storybook/src/generators/baseGenerator.ts

@@ -26,13 +26,15 @@ const defaultOptions: FrameworkOptions = {
   staticDir: undefined,
   addScripts: true,
   addMainFile: true,
+  addPreviewFile: true,
   addComponents: true,
   webpackCompiler: () => undefined,
   extraMain: undefined,
   framework: undefined,
   extensions: undefined,
   componentsDestinationPath: undefined,
   storybookConfigFolder: '.storybook',
+  installFrameworkPackages: true,
 };
 
 const getBuilderDetails = (builder: string) => {
@@ -207,12 +209,14 @@ export async function baseGenerator(
     staticDir,
     addScripts,
     addMainFile,
+    addPreviewFile,
     addComponents,
     extraMain,
     extensions,
     storybookConfigFolder,
     componentsDestinationPath,
     webpackCompiler,
+    installFrameworkPackages,
   } = {
     ...defaultOptions,
     ...options,
@@ -286,7 +290,7 @@ export async function baseGenerator(
   const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
-    ...frameworkPackages,
+    ...(installFrameworkPackages ? frameworkPackages : []),
     ...addonPackages,
     ...(extraPackagesToInstall || []),
   ].filter(Boolean);
@@ -328,7 +332,9 @@ export async function baseGenerator(
     addDependenciesSpinner.succeed();
   }
 
-  await fse.ensureDir(`./${storybookConfigFolder}`);
+  if (addMainFile || addPreviewFile) {
+    await fse.ensureDir(`./${storybookConfigFolder}`);
+  }
 
   if (addMainFile) {
     const prefixes = shouldApplyRequireWrapperOnPackageNames
@@ -376,12 +382,14 @@ export async function baseGenerator(
     });
   }
 
-  await configurePreview({
-    frameworkPreviewParts,
-    storybookConfigFolder: storybookConfigFolder as string,
-    language,
-    rendererId,
-  });
+  if (addPreviewFile) {
+    await configurePreview({
+      frameworkPreviewParts,
+      storybookConfigFolder: storybookConfigFolder as string,
+      language,
+      rendererId,
+    });
+  }
 
   if (addScripts) {
     await packageManager.addStorybookCommandInScripts({

code/lib/create-storybook/src/generators/types.ts

@@ -23,13 +23,15 @@ export interface FrameworkOptions {
   staticDir?: string;
   addScripts?: boolean;
   addMainFile?: boolean;
+  addPreviewFile?: boolean;
   addComponents?: boolean;
   webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined;
   extraMain?: any;
   extensions?: string[];
   framework?: Record<string, any>;
   storybookConfigFolder?: string;
   componentsDestinationPath?: string;
+  installFrameworkPackages?: boolean;
 }
 
 export type Generator<T = void> = (

code/lib/create-storybook/src/initiate.ts

@@ -27,6 +27,7 @@ import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
 import htmlGenerator from './generators/HTML';
 import nextjsGenerator from './generators/NEXTJS';
+import nuxtGenerator from './generators/NUXT';
 import preactGenerator from './generators/PREACT';
 import qwikGenerator from './generators/QWIK';
 import reactGenerator from './generators/REACT';
@@ -110,6 +111,11 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "Vue 3" app')
         );
 
+      case ProjectType.NUXT:
+        return nuxtGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "Nuxt" app')
+        );
+
       case ProjectType.ANGULAR:
         commandLog('Adding Storybook support to your "Angular" app');
         return angularGenerator(packageManager, npmOptions, generatorOptions, options);

scripts/utils/yarn.ts

@@ -123,6 +123,8 @@ export const configureYarn2ForVerdaccio = async ({
     command.push(
       `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`
     );
+  } else if (key.includes('nuxt')) {
+    // Nothing to do for Nuxt
   } else {
     // Discard all YN0013 - FETCH_NOT_CACHED messages
     // Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY