chore: migrate to official storybook nuxt module

Fixes #1917 and fixes #2227.

Author: tobiasdiez

.storybook/main.ts

@@ -1,6 +1,4 @@
-import { buildNuxt, loadNuxt, tryUseNuxt } from '@nuxt/kit'
-import type { StorybookConfig } from '@storybook/vue3-vite'
-import { mergeConfig } from 'vite'
+import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config: StorybookConfig = {
   // Need to specify stories as workaround for https://github.com/storybookjs/storybook/issues/20761
@@ -9,81 +7,10 @@ const config: StorybookConfig = {
     disableTelemetry: true,
   },
   framework: {
-    name: '@storybook/vue3-vite',
+    name: '@storybook-vue/nuxt',
     options: {},
   },
   addons: ['storybook-vue-addon'],
-  async viteFinal(config) {
-    const nuxtViteConfig = (await startNuxtAndGetViteConfig()).viteConfig
-    // Need to remove storybook-vue-addon since it will be inserted by the storybook-vue-addon plugin
-    // TODO: Would be better if we would check there that the plugin is not already added
-    config.plugins = config.plugins.filter((plugin) => {
-      if (
-        plugin !== null &&
-        typeof plugin === 'object' &&
-        'name' in plugin &&
-        plugin.name === 'storybook-vue-addon'
-      ) {
-        return false
-      }
-      return true
-    })
-    return mergeConfig(
-      {
-        resolve: nuxtViteConfig.resolve,
-        optimizeDeps: nuxtViteConfig.optimizeDeps,
-        plugins: nuxtViteConfig.plugins,
-        define: nuxtViteConfig.define,
-      },
-      config,
-    )
-  },
-}
-
-// https://github.com/nuxt/nuxt/issues/14534
-// From: https://github.com/danielroe/nuxt-vitest/blob/main/packages/nuxt-vitest/src/config.ts
-async function startNuxtAndGetViteConfig(rootDir = process.cwd()) {
-  let nuxt = tryUseNuxt()
-  let nuxtAlreadyRunnnig = true
-  if (!nuxt) {
-    nuxtAlreadyRunnnig = false
-    nuxt = await loadNuxt({
-      cwd: rootDir,
-      dev: false,
-      overrides: {
-        ssr: false,
-        app: {
-          rootId: 'nuxt-test',
-        },
-      },
-    })
-  }
-
-  const promise = new Promise<{ nuxt; viteConfig }>((resolve, reject) => {
-    nuxt.hook('vite:extendConfig', (viteConfig, { isClient }) => {
-      if (isClient) {
-        resolve({ nuxt, viteConfig })
-        if (!nuxtAlreadyRunnnig) {
-          throw new Error('_stop_')
-        }
-      }
-    })
-
-    // TODO: Need better handling if Nuxt is already running
-    // we don't really want to build nuxt again,
-    // or at least shutdown the second build after vite:extendConfig is called
-    buildNuxt(nuxt).catch((err) => {
-      if (!err.toString().includes('_stop_')) {
-        reject(err)
-      }
-    })
-  }).finally(() => {
-    if (!nuxtAlreadyRunnnig) {
-      nuxt.close()
-    }
-  })
-
-  return promise
 }
 
 export default config

modules/storybook.ts

@@ -28,10 +28,6 @@ export default defineNuxtConfig({
     },
     // Prevent 'reflect-metadata' and 'json-bigint-patch' from being treeshaked (since we don't explicitly use the import it would otherwise be removed)
     moduleSideEffects: ['reflect-metadata', 'json-bigint-patch'],
-    prerender: {
-      // Needed for storybook support (otherwise the file is not created during nuxi generate)
-      routes: ['/_storybook/external-iframe'],
-    },
     esbuild: {
       options: {
         tsconfigRaw: {
@@ -49,11 +45,6 @@ export default defineNuxtConfig({
     typedPages: true,
   },
 
-  vue: {
-    // Add support for vue runtime compiler (needed to render stories in storybook)
-    runtimeCompiler: true,
-  },
-
   // Workaround for https://github.com/nuxt/nuxt/issues/22933
   hooks: {
     close: (nuxt) => {
@@ -143,6 +134,9 @@ export default defineNuxtConfig({
     // Add support for writing content in markdown
     // https://content.nuxtjs.org/
     '@nuxt/content',
+    // Add support for storybook
+    // https://storybook.nuxtjs.org/
+    '@nuxtjs/storybook',
     // Add support for native vue stories
     // https://github.com/tobiasdiez/storybook-vue-addon
     'storybook-vue-addon/nuxt',

nuxt.config.ts

@@ -23,7 +23,7 @@
     "prisma:studio": "prisma studio",
     "prisma:generate": "prisma generate",
     "prisma:generate:watch": "prisma generate --watch",
-    "storybook": "storybook dev -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe --no-manager-cache",
+    "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "storybook:publish": "chromatic --exit-zero-on-changes --build-script-name storybook:build",
     "graphql:generate": "graphql-codegen-esm",
@@ -70,6 +70,7 @@
     "nodemailer": "^6.8.0",
     "pinia": "^2.1.6",
     "reflect-metadata": "^0.1.13",
+    "storybook": "^7.4.5",
     "ts-loader": "^9.4.4",
     "ts-node": "^10.9.1",
     "tsyringe": "^4.8.0",
@@ -94,10 +95,9 @@
     "@nuxt/devtools": "^0.8.3",
     "@nuxtjs/eslint-config": "^12.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@nuxtjs/storybook": "^7.0.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
-    "@storybook/core-server": "^7.0.26",
-    "@storybook/vue3": "^7.0.26",
-    "@storybook/vue3-vite": "7.0.26",
+    "@storybook-vue/nuxt": "^0.1.4",
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
@@ -138,7 +138,6 @@
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.3",
     "prisma": "^5.3.1",
-    "storybook": "7.0.26",
     "storybook-vue-addon": "^0.4.0",
     "supertest": "^6.3.3",
     "supertest-graphql": "^1.1.4",