storybookjs · tobiasdiez · Apr 19, 2024 · Apr 19, 2024 · May 13, 2024 · May 17, 2024
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
@@ -53,7 +53,8 @@
  ],
  "scripts": {
  "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
- "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
+ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts",
+ "sb": "node ./bin/index.js"
  },
  "dependencies": {
  "@babel/core": "^7.24.4",

diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts
@@ -41,6 +41,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: {
@@ -433,16 +455,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 = {

diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts
@@ -120,7 +120,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;
  }
@@ -133,6 +137,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(
  {
@@ -202,6 +208,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 (fs.existsSync('tsconfig.json')) {
+ language = SupportedLanguage.TYPESCRIPT_4_9;
+ }
  }
 
  return language;

diff --git a/code/lib/cli/src/generators/NUXT/index.ts b/code/lib/cli/src/generators/NUXT/index.ts
@@ -0,0 +1,32 @@
+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'];
+ },
+ installStorybookPackage: false,
+ 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;
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
@@ -23,13 +23,16 @@ 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',
+ installStorybookPackage: true,
+ installFrameworkPackages: true,
 };
 
 const getBuilderDetails = (builder: string) => {
@@ -202,12 +205,15 @@ export async function baseGenerator(
  staticDir,
  addScripts,
  addMainFile,
+ addPreviewFile,
  addComponents,
  extraMain,
  extensions,
  storybookConfigFolder,
  componentsDestinationPath,
  webpackCompiler,
+ installStorybookPackage,
+ installFrameworkPackages,
  } = {
  ...defaultOptions,
  ...options,
@@ -279,9 +285,9 @@ export async function baseGenerator(
  : extraPackages;
 
  const allPackages = [
- 'storybook',
+ installStorybookPackage ? 'storybook' : undefined,
  getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
- ...frameworkPackages,
+ ...(installFrameworkPackages ? frameworkPackages : []),
  ...addonPackages,
  ...(extraPackagesToInstall || []),
  ].filter(Boolean);
@@ -323,7 +329,9 @@ export async function baseGenerator(
  addDependenciesSpinner.succeed();
  }
 
- await fse.ensureDir(`./${storybookConfigFolder}`);
+ if (addMainFile || addPreviewFile) {
+ await fse.ensureDir(`./${storybookConfigFolder}`);
+ }
 
  if (addMainFile) {
  const prefixes = shouldApplyRequireWrapperOnPackageNames
@@ -371,12 +379,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({

diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts
@@ -22,13 +22,16 @@ 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;
+ installStorybookPackage?: boolean;
+ installFrameworkPackages?: boolean;
 }
 
 export type Generator<T = void> = (

diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
@@ -143,6 +143,7 @@ export const frameworkToDefaultBuilder: Record<SupportedFrameworks, CoreBuilder>
  'html-vite': CoreBuilder.Vite,
  'html-webpack5': CoreBuilder.Webpack5,
  nextjs: CoreBuilder.Webpack5,
+ nuxt: CoreBuilder.Vite,
  'preact-vite': CoreBuilder.Vite,
  'preact-webpack5': CoreBuilder.Webpack5,
  qwik: CoreBuilder.Vite,

diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
@@ -28,6 +28,7 @@ import reactNativeGenerator from './generators/REACT_NATIVE';
 import reactScriptsGenerator from './generators/REACT_SCRIPTS';
 import nextjsGenerator from './generators/NEXTJS';
 import vue3Generator from './generators/VUE3';
+import nuxtGenerator from './generators/NUXT';
 import webpackReactGenerator from './generators/WEBPACK_REACT';
 import htmlGenerator from './generators/HTML';
 import webComponentsGenerator from './generators/WEB-COMPONENTS';
@@ -109,6 +110,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);

diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
@@ -23,6 +23,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' },
 ];
 
 /**
@@ -52,6 +53,7 @@ export enum ProjectType {
  WEBPACK_REACT = 'WEBPACK_REACT',
  NEXTJS = 'NEXTJS',
  VUE3 = 'VUE3',
+ NUXT = 'NUXT',
  ANGULAR = 'ANGULAR',
  EMBER = 'EMBER',
  WEB_COMPONENTS = 'WEB_COMPONENTS',
@@ -117,6 +119,13 @@ export type TemplateConfiguration = {
  * therefore WEBPACK_REACT has to come first, as it's more specific.
  */
 export const supportedTemplates: TemplateConfiguration[] = [
+ {
+ preset: ProjectType.NUXT,
+ dependencies: ['nuxt'],
+ matcherFunction: ({ dependencies }) => {
+ return dependencies?.every(Boolean) ?? true;
+ },
+ },
  {
  preset: ProjectType.VUE3,
  dependencies: {
@@ -238,10 +247,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;
  },

diff --git a/code/lib/core-common/src/utils/framework-to-renderer.ts b/code/lib/core-common/src/utils/framework-to-renderer.ts
@@ -22,6 +22,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',
  // renderers

diff --git a/code/lib/types/scripts/generate-available-frameworks.js b/code/lib/types/scripts/generate-available-frameworks.js
@@ -6,7 +6,7 @@ import path from 'node:path';
 import prettier from 'prettier';
 import dedent from 'ts-dedent';
 
-const thirdPartyFrameworks = ['qwik', 'solid'];
+const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt'];
 
 const run = async () => {
  const frameworks = await readdir(path.join(__dirname, '..', '..', '..', 'frameworks'));

diff --git a/code/lib/types/src/modules/frameworks.ts b/code/lib/types/src/modules/frameworks.ts
@@ -19,4 +19,5 @@ export type SupportedFrameworks =
  | 'web-components-vite'
  | 'web-components-webpack5'
  | 'qwik'
- | 'solid';
+ | 'solid'
+ | 'nuxt';
diff --git a/code/lib/types/src/modules/renderers.ts b/code/lib/types/src/modules/renderers.ts
@@ -11,4 +11,5 @@ export type SupportedRenderers =
  | 'html'
  | 'web-components'
  | 'server'
- | 'solid';
+ | 'solid'
+ | 'nuxt';