Missing @storybook/vue3-vite dependency

[HZooly]

Fresh Nuxt 3 project, after running npx nuxi@latest module add storybook, following packages are installed:

  "dependencies": {
    "@nuxtjs/storybook": "^8.2.0",
    "nuxt": "^3.13.0",
    "vue": "latest"
  },
  "devDependencies": {
    "storybook": "8.0.8",
    "@types/node": "^18.17.5",
    "@storybook/vue3": "8.0.8",
    "@storybook-vue/nuxt": "0.2.6",
    "@nuxtjs/storybook": "7.0.2",
    "@storybook/addon-links": "8.0.8",
    "@storybook/builder-vite": "8.0.8",
    "@storybook/addon-essentials": "8.0.8",
    "@storybook/addon-interactions": "8.0.8",
    "@storybook/test": "8.0.8",
    "@storybook/blocks": "8.0.8"
  }

When running npm run storybook, I have the following error:

=> Failed to build the preview
Error: Cannot find @storybook/vue3-vite,
    at getPackageDir (./node_modules/@storybook-vue/nuxt/dist/preset.cjs:6805:9)
    at getStorybookViteConfig (./node_modules/@storybook-vue/nuxt/dist/preset.cjs:6767:64)
    at Object.viteFinal (./node_modules/@storybook-vue/nuxt/dist/preset.cjs:6773:51)
    at ./node_modules/@storybook/core-common/dist/index.js:12:1162

[adrianpdm]

The dependencies and the init script are outdated as mention in #721. Here's a workaround that "works" for me:

• Update all the added packages to latest, for example:

  npm i storybook@latest -D
  npm i @storybook/vue3@latest -D
  npm i @storybook-vue/nuxt@latest -D
  # ... do that for all the added packages

• I believe @types/node is not needed

  npm uninstall @types/node

The above should at least get you to view your stories page, albeit there are still a couple of issues here and there.

[HZooly]

Thanks @adrianpdm! Indeed I get a lot of different errors when trying to configure/upgrade Storybook. Waiting for some fixes before trying again. Thanks fro your help.

[tobiasdiez]

This "@storybook-vue/nuxt": "0.2.6", looks like a very old version. npm i @storybook/vue3@latest -D should not be needed anymore.

Indeed I get a lot of different errors when trying to configure/upgrade Storybook.

Could you please open new issues for them with reproductions? Thanks!

[HZooly]

That's weird given that these dependencies come from a fresh Nuxt & Nuxt Storybook project

[molavec]

Same error here!

npx nuxi@latest module add storybook

❯ npm -v
10.8.2
❯ node -v
v20.16.0

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxtjs/storybook": "^8.2.0",
    "nuxt": "^3.13.0",
    "vue": "latest",
    "vue-router": "latest"
  }
}

[molavec]

The dependencies and the init script are outdated as mention in #721. Here's a workaround that "works" for me:

• Update all the added packages to latest, for example:

  npm i storybook@latest -D
  npm i @storybook/vue3@latest -D
  npm i @storybook-vue/nuxt@latest -D
  # ... do that for all the added packages

• I believe @types/node is not needed

  npm uninstall @types/node

The above should at least get you to view your stories page, albeit there are still a couple of issues here and there.

Solved for me!

Some additional things:

Here all packages to be update to copy/paste:

npm i -D storybook@latest \
 @storybook/vue3@latest  \
 @storybook-vue/nuxt@latest \
 @storybook/addon-essentials@latest \
 @storybook/addon-interactions@latest \
 @storybook/addon-interactions@latest \
 @storybook/blocks@latest \
 @storybook/blocks@latest \
 @storybook/builder-vite@latest \
 @storybook/test@latest

From Docs: https://storybook.nuxtjs.org/getting-started/typescript

To use the Nuxt module with TypeScript, ensure that imports typically from @storybook/* are now replaced by imports from @nuxtjs/storybook (or @storybook-vue/nuxt if the Nuxt module is not used). This is needed since the Storybook packages are dependencies of the Nuxt module, and are not directly installed in the project.

./storybook/main.ts

import { StorybookConfig } from '@nuxtjs/storybook' // not from '@storybook/core-common'

./storybook/preview.ts

import type { Preview } from "@nuxtjs/storybook";

and import from '@nuxtjs/storybook' as indicates in docs