Using @nuxt/ui-pro components gives "Missing `NUXT_UI_PRO_LICENSE` license key" error

[theunsa]

Issue

At the moment this module fails when the builder detects a missing NUXT_UI_PRO_LICENSE key in a project using Nuxt UI Pro components:

$ pnpm run storybook

> nuxt-app@ storybook /Users/theuns/Projects/plumbline/avoda-ui
> storybook dev --port 6006

storybook v8.2.9

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
info => Starting manager..
info => Starting preview..
ℹ Nuxt Icon server bundle mode is set to local                                                                                                                                    8:54:20 PM
ℹ Using default Tailwind CSS file                                                                                                                                nuxt:tailwindcss 8:54:20 PM
ℹ 🔌  Storybook Module Setup                                                                                                                                                      8:54:20 PM
ℹ                                                                                                                                                                                 8:54:20 PM
ℹ 📚  Storybook is configured                                                                                                                                                     8:54:20 PM
ℹ                                                                                                                                                                                 8:54:20 PM
Running with compatibility version `4`
=> Failed to build the preview
Error: Error: Missing `NUXT_UI_PRO_LICENSE` license key.
Purchase Nuxt UI Pro at `https://ui.nuxt.com/pro/pricing` to build your app in production.

Reason to support this

Given that Nuxt is so kind to allow the Nuxt UI Pro components for free during development (and only require license when you deploy to production), it would make sense for Storybook to cater for this use case given that Storybook is such a valuable tool during the initial design & dev phase of a web app project.

Extra info

  "devDependencies": {
    "@nuxtjs/storybook": "7.0.2",
    "@storybook-vue/nuxt": "0.2.6",
    "@storybook/addon-essentials": "8.2.9",
    "@storybook/addon-interactions": "8.2.9",
    "@storybook/addon-links": "8.2.9",
    "@storybook/blocks": "8.2.9",
    "@storybook/builder-vite": "8.2.9",
    "@storybook/test": "8.2.9",
    "@storybook/vue3": "8.2.9",
    "nuxt": "^3.12.4",
    "storybook": "8.2.9"
  },
  
 node: v20.15.0

I've tried

My assumption is that Storybook's vite always builds in "production" mode which triggers the "Missing NUXT_UI_PRO_LICENSE license key" condition, even if it runs as storybook dev --port 6006. So I've tried to force the mode in nuxt.config.ts, but to no avail:

vite: {
    build: {
        mode: 'development'
    },
}

To reproduce

Add Nuxt UI Pro components to your nuxt app by following these two steps: https://ui.nuxt.com/pro/getting-started/installation

[tobiasdiez]

I looked into this and storybook actually sets the mode to development: https://github.com/storybookjs/storybook/blob/87c37572bb986271c407700cf75f950e70325cdf/code/builders/builder-vite/src/vite-config.ts#L32-L36

Not sure if this is a) not triggered correctly b) overwritten somewhere or c) not detected properly by nuxt ui.

[hacknug]

My assumption is that Storybook's vite always builds in "production" mode which triggers the "Missing NUXT_UI_PRO_LICENSE license key" condition, even if it runs as storybook dev --port 6006.

Your assumption is not correct. I recently added a note to the docs to document this in #906.

TLDR is Storybook will run Nuxt in development mode when running via nuxt dev, and run in production mode when running via storybook dev.

I believe your solution would work when applied to viteFinal inside your .storybook/main.ts but I haven't tested that myself. You can see some examples on how to modify the Vite config for Storybook here: https://storybook.js.org/docs/builders/vite

[theunsa]

Thanks @hacknug and for adding that warning in the docs.