chore: migrate to official storybook nuxt module

.github/workflows/ci.yml

@@ -121,14 +121,11 @@ jobs:
           TEST_URL: http://localhost:3000
 
       - name: Build Storybook
-        run: |
-          pnpm nuxi generate
-          pnpm storybook:build
-          cp .output/public/_storybook/external-iframe/index.html storybook-static/iframe.html
-          mkdir -p storybook-static/_storybook/external-iframe
-          cp -r .output/public/_nuxt storybook-static
+        if: always()
+        run: pnpm storybook:build
 
       - name: Publish and test Storybook
+        if: always()
         uses: chromaui/action@58d9ffb36c90c97a02d061544ecc849cc4a242a9 # v13
         with:
           projectToken: 'b3787adf2fa5'

.storybook/main.ts

@@ -1,90 +1,16 @@
-import type { StorybookConfig } from '@storybook/vue3-vite'
-import { mergeConfig } from 'vite'
+import type { StorybookConfig } from '@nuxtjs/storybook'
 
 const config: StorybookConfig = {
   // Need to specify stories as workaround for https://github.com/storybookjs/storybook/issues/20761
   stories: ['../components/*.stories.@(vue|ts)'],
   core: {
+    // @ts-expect-error - need to update storybook types
     disableTelemetry: true,
   },
+  addons: ['storybook-vue-addon', '@chromatic-com/storybook'],
   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()) {
-  // Use dynamic import as a workaround for https://github.com/storybookjs/storybook/issues/23972
-  const { buildNuxt, loadNuxt, tryUseNuxt } = await import('@nuxt/kit')
-  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: Error) => {
-      if (!err.toString().includes('_stop_')) {
-        reject(err)
-      }
-    })
-  }).finally(() => {
-    if (!nuxtAlreadyRunnnig) {
-      nuxt.close()
-    }
-  })
-
-  return promise
-}
-
 export default config

.storybook/preview.ts

@@ -0,0 +1,3 @@
+export default {
+  tags: ['autodocs'],
+}

chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:61142988527d34003b1e783d",
+  "zip": true
+}

components/JabRefLogo.stories.vue

@@ -3,7 +3,6 @@ import JabRefLogo from './JabrefLogo.vue'
 </script>
 
 <template>
-  <!-- @vue-expect-error: wrong ts of vue-stories -->
   <Stories
     title="JabRef Logo"
     :component="JabRefLogo"

components/n-button.stories.vue

@@ -2,7 +2,6 @@
 import { NButton } from 'naive-ui'
 </script>
 <template>
-  <!-- @vue-expect-error: wrong ts of vue-stories -->
   <Stories
     title="n-button"
     :component="NButton"

components/t-alert.stories.ts

@@ -1,9 +1,10 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TAlert } from '@variantjs/vue'
 
 export default {
   component: TAlert,
   title: 't-alert',
   args: {
     show: true,
@@ -11,14 +12,15 @@
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },
   template: '<t-alert v-bind="args">{{args.message}}</t-alert>',
 })
 export const Default = Template.bind({})
 export const Error = Template.bind({})
 Error.args = {
   variant: 'error',
   message: 'oops!',

components/t-checkbox.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TCheckbox } from '@variantjs/vue'
 
@@ -10,7 +11,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-dropdown.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TDropdown } from '@variantjs/vue'
 
@@ -10,7 +11,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-input-group.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TInputGroup } from '@variantjs/vue'
 
@@ -12,7 +13,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-input.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TInput } from '@variantjs/vue'
 
@@ -10,7 +11,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-nuxtlink.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TButton } from '@variantjs/vue'
 
@@ -10,7 +11,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-select.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TSelect } from '@variantjs/vue'
 
@@ -11,7 +12,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-table.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 import TTable from '~/components/TTable.vue'
 
 export default {
@@ -13,7 +14,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-tag.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TTag } from '@variantjs/vue'
 
@@ -11,7 +12,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

components/t-textarea.stories.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
+// @ts-expect-error: not sure why nuxi typecheck fails for this
+import type { Meta, StoryFnFn } from '@nuxtjs/storybook'
 // @ts-expect-error: not yet compatible with 'bundler' module resolution
 import { TTextarea } from '@variantjs/vue'
 
@@ -10,7 +11,8 @@ export default {
   },
 } as Meta
 
-const Template: StoryFn = (args) => ({
+// @ts-expect-error: story missing arg types
+const Template: StoryFnFn = (args) => ({
   setup() {
     return { args }
   },

eslint.config.mjs

@@ -11,9 +11,6 @@ import withNuxt from './.nuxt/eslint.config.mjs'
 export default withNuxt({
   languageOptions: {
     parserOptions: {
-      projectService: {
-        allowDefaultProject: ['.storybook/*.ts'],
-      },
       tsconfigRootDir: import.meta.dirname,
     },
   },