nuxt-modules / storybook Goto Github PK

View Code? Open in Web Editor NEW

366.0 17.0 76.0 7.13 MB

Storybook integration with Nuxt.

Home Page: https://storybook.nuxtjs.org

Vue 4.69% TypeScript 36.59% MDX 45.45% CSS 12.08% JavaScript 1.19%

nuxt-module storybook

storybook's Introduction

Nuxt Storybook

Integrate Storybook into your Nuxt application.

Installing

npx nuxi@latest module add storybook

Update your nuxt.config:

  modules: [
    '@nuxtjs/storybook',
  ],
  storybook: {
    url: 'http://localhost:6006',
    storybookRoute: '/__storybook__',
    port: 6006,
  },

Then run pnpm dev to start you Nuxt server.

Demo

https://github.com/storybook-vue/nuxt-storybook-module-demo

Features

👌 Zero configuration to start (see video)

🪄 Access Storybook Terminal

🎨 Devtools tab with Storybook app

⚙️ Reference your Storybook config in your app

📦 Extendable by Nuxt modules

🚀 Supports Nuxt 3 / Storybook 7

Nuxt 2

Nuxt 2 is supported with Storybook v6,you can check legacy code on the v4 branch.

Contributing

Install dependencies with pnpm.
Run pnpm dev:prepare to generate stubbed dist directory.
Make your changes.
Run pnpm lint to verify that there is no issues (consider adding tests).
Submit a PR.

License

This repository is licensed under the MIT License. Feel free to use the code and modify it according to your needs.

Contacts :

🔖 Mail: [email protected]

💬 Discord: ChakAs3

🐦‍⬛ Twitter: @ChakirQatab

storybook's People

Contributors

Stargazers

Watchers

storybook's Issues

Automatically generate & load (module) plugins

Eg if you use @nuxtjs/fontawesome icons in your components the plugin generated by that module should also be loaded in storybook

Ideas:

Support a config structure for modules so they can indicate themselves whether their plugins need to be loaded in storybook or not (but let the user be able to override that)

Storybook V6 Support

Currently @nuxtjs/storybook works with Stoyebook v5 and at the time Storybook team working for the next major release v6.
Let's discuss here about moving to Storybook v6.

Support for custom `srcDir`

This currently gives:

ERROR in ./.nuxt-storybook/storybook/preview.js
Module not found: Error: Can't resolve '~/.nuxt-storybook/components'

Add (quick) support for enabling specific addons

This issue could be the follow up of #84

I think adding builtin support for the following addons makes sense because they require additional webpack loaders:

@storybook/addon-storysource
- needs @storybook/source-loader to be able to show the source of your stories file
- needs a option rule which matches the story files
@storybook/addon-docs
- also needs @storybook/source-loader for showing the individual story source
- needs vue-docgen-loader to be able to automatically show props (and code comments) in the docs args table
  - note: This doesnt seem to be explicitly mentioned in the addon-docs documention for Vue, but for me the loaders arent automatically added. Probably because we are using a fully custom webpack config
- this addon also needs a vueDocgenOptions option that lists all webpack aliases (& maybe module paths)

Also, please note that @storybook/addon-knobs will be deprecated with v7 in favor of @storybook/addon-controls. Currently some examples are still using knobs which might give the wrong impression to users of this module.

Addons configuration and decorators

I am just getting started with storybook, so please bear with me.

I first added storybook-addon-paddings, then jumped into preview.js template to find that plugins are only being imported, wheres plenty of these use addDecorator or things of that sort.

I though I'd try something official, installing @storybook/addon-console and adding to nuxt config gave me following.

Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel

Am I missing something or something is not supported? Perhaps we need some addition to the docs?

Serving a static image

I'm trying to get this basic component to render within the storybook and am having no luck. The component works just fine within my site, but it's not transferring over to Storybook as I'd expect.

<img src="/logo.png" class="Logo" alt="Logo">

Are there additional steps needs to run components that utilize static files?

Tell @nuxt/component to ignore `.stories.js`

When using components: true, it includes the *.stories.js:

I updated the documentation to add in .nuxtignore: https://storybook.nuxtjs.org/setup

I guess it can be improved from a Nuxt POV (see with @pi0 )

Vuetify preset module not applying custom variables

Version

@nuxtjs/storybook: v2.1.0
nuxt: v2.14.1

Steps to reproduce

Install the @nuxt/vuetify module and vue-cli-plugin-vuetify-preset-rally
Add the following to nuxt.config.js

vuetify: {
    customVariables: ["vue-cli-plugin-vuetify-preset-rally/preset/variables.scss"],
    preset: "vue-cli-plugin-vuetify-preset-rally/preset"
},
build: {
    transpile: ["vue-cli-plugin-vuetify-preset-rally"],
    ...
}

What is Expected?

That whatever is defined in the presets variables.scss file to be applied to the components (in other words, for it to prepend that file to all scss files). When running in the normal nuxt environment it works, but not in storybook.

What is actually happening?

None of those styles are applied

Path resolution problem when trying to use @storybook/addon-storyshots

Hello, thank you for this excellent module! I'm trying to use storyshots, and I'm getting a path resolution error. I should also note I'm currently using a release candidate for Storybook 6

"@nuxtjs/storybook": "^1.1.0",
"@storybook/addon-storyshots": "^6.0.0-rc.27",

And here is my storyshots.test.js:

import path from 'path'
import initStoryshots from '@storybook/addon-storyshots'

initStoryshots({
  configPath: path.resolve(__dirname, '../.nuxt-storybook/storybook'),
})

It's almost working, but when I set my storyshots configPath to use the .nuxt-storybook config, it runs into path resolution errors.

 FAIL  test/storyshots.test.js
  ● Test suite failed to run

    Cannot find module '~~/.nuxt-storybook/utils' from '.nuxt-storybook/storybook/preview.js'

    Require stack:
      .nuxt-storybook/storybook/preview.js
      node_modules/@storybook/addon-storyshots/dist/frameworks/configure.ts
      node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js
      node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.ts
      node_modules/@storybook/addon-storyshots/dist/api/index.js
      node_modules/@storybook/addon-storyshots/dist/index.js
      test/storyshots.test.js

Any tips on what I should set my config path to?

Storybook Theming

Is your feature request related to a problem? Please describe.

Theming storybook

Describe the solution you'd like

Add manager.js for theming

Describe alternatives you've considered

N/A

Additional context

N/A

v2.0 not finding my stories with glob warning

Version

@nuxtjs/storybook: 2.0.0
nuxt: 2.14.0

Reproduction Link

https://codesandbox.io/s/inspiring-wright-zkznq?file=/components/Link/Link.stories.js

Steps to reproduce

Run storybook with npx nuxt storybook
You will see a warning message "We found no files matching any of the following globs"

What is Expected?

For storybook to run and to automatically find my story in /components/Link/Link.stories.js

What is actually happening?

I get a warning message about the glob and how no stories are found. Storybook also doesn't fully load, it hangs when viewing at localhost:3003, perhaps because it can't find any stories?

WARN We found no files matching any of the following globs:
WARN 
WARN ~/components/**/*.stories.@(ts|js)
WARN 
WARN Maybe your glob was invalid?
WARN see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs

Note that this works as expected in @nuxtjs/storybook v1.2

2.0.0 Cannot use the decorators and decorators-legacy plugin together

ERROR in ./.nuxt-storybook/storybook/generated-refs.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot use the decorators and decorators-legacy plugin together

nuxt: 2.14.1
stoybook : 2.1.0

Environmental Variables

Version

@nuxtjs/storybook: v2.1.0
nuxt: v2.14.0

Reproduction Link

Storybook environment variables does not seem to be working.

Steps to reproduce

Run nuxt-storybook with environment variable prefixed STORYBOOK_ e.g. STORYBOOK_OFFLINE=true nuxt-storybook

What is Expected?

process.env should return an object with STORYBOOK_OFFLINE along with other default environment variables

What is actually happening?

process.env returns {};

npx nuxt storybook build fails on a local project

On a local demo, I am trying to run npx nuxt storybook build but I got this error:

Bug add child component

Version

@nuxtjs/storybook:
nuxt:

component Wrapper.vue

  <div class="wrapper">
    Wrapper - rounded = {{ rounded }}
    <WrapperItem />
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Wrapper',

  props: {
    rounded: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

story Wrapper.stories.js

  title: 'Wrapper',
}

export const asAComponent = () => '<Wrapper :rounded="true">rounded</Wrapper>'

We look in the browser console

Uncaught TypeError: ({}) is not a function

Version

@nuxtjs/storybook: v2.1.0
nuxt: v2.14.3
@nuxt/typescript-runtime: v1.0.0
@nuxt/typescript-build: v2.0.2

Steps to reproduce

Run storybook through npm: npm run storybook
Where package.json is setup as:

"storybook": "nuxt storybook -s ./static -p 6006"

What is Expected?

Storybook starts and shows stories.

What is actually happening?

Storybook loads doesn't show stories and in console.log it shows:

(The error occurs in entry.js)

nuxt storybook build --output-dir

Currently the nuxt storybook build command does not accept the --output-dir flag. This causes chromatic to fail because it attempts to provide that flag to the build-storybook script.

I would expect nuxt storybook build to simply forward any flags directly to build-storybook.

For Chromatic, there's a workaround available, but that's not ideal:

Run nuxt storybook build manually before running Chromatic
Run chromatic with the --storybook-build-dir storybook-static flag

PS I'm the maintainer of chromatic-cli. This issue was reported by one of our users.

Incorrect storybook version (v1.0.0) is being reported

Version

@nuxtjs/storybook: v1.0.0
nuxt: v2.14.0

Steps to reproduce

Install per tutorial, run npx nuxt storybook

What is Expected?

No warnings

What is actually happening?

I see a warning that I'm using version 1.0.0 of storybook and version 5.3.19 is available.
I have a suspicion that this is due to @nuxtjs/storybook being 1.0.0 and somewhere the versions clash

Official comamnd to switch to manual setup

It would be nice if there is an official command (let's call it export) that creates storybook directory and generates storybook/main.js and storybook/preview.js according to manual-setup docs

Invalid path resolution

I assume on Windows path are not resolved correctly

CLI
Generated files

(backslashes are not escaped which cause the path to not be resolved correctly)

I also manually set srcDir inside the config file

Version

@nuxtjs/storybook: 2.1.0
nuxt: 2.14.3

Reproduction Link

https://codesandbox.io/s/cranky-cookies-y5if8?file=/src/components/test.stories.js

Note: This sandbox just show my architecture as the error seems related to the OS & path escaping and I assume sandbox runs on linux

Steps to reproduce

Run yarn nuxt storybook

What is Expected?

The app should compile

What is actually happening?

`core-js` incompatibilities

If added to a new Nuxt project produced with create-nuxt-app, this will produce lots of errors about missing core-js@2 polyfills, which is because Storybook depends on core-js@3:

Module not found: Error: Can't resolve 'core-js/modules/es6.promise

I suggest that instead part of the setup is migrating a Nuxt project over to use core-js@3, and have prepared a PR to do so.

Storybook controls addon doesn't work

Version

@nuxtjs/storybook: v1.0.0
nuxt: v2.12.0

Steps to reproduce

npm i -D @storybook/docs @storybook/controls
add addons to storybook per docs

    addons: [
      '@storybook/addon-docs/register',
      '@storybook/addon-controls/register',
      '@storybook/addon-viewport/register'
    ],

npx nuxt storybook

What is Expected?

All addons work

What is actually happening?

Clicking on controls shows an empty page with tons of JS erorrs
https://cln.sh/9gGUAR

vendors~main.921ddef01d0b8adf1714.bundle.js:132674 TypeError: (0 , _api.useArgs) is not a function
    at ControlsPanel (vendors~main.921ddef01d0b8adf1714.bundle.js:5285)
    at oh (vendors~main.921ddef01d0b8adf1714.bundle.js:132618)
    at Rj (vendors~main.921ddef01d0b8adf1714.bundle.js:132726)
    at Qj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at Kj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at yj (vendors~main.921ddef01d0b8adf1714.bundle.js:132704)
    at vendors~main.921ddef01d0b8adf1714.bundle.js:132588
    at push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (vendors~main.921ddef01d0b8adf1714.bundle.js:159049)
    at cg (vendors~main.921ddef01d0b8adf1714.bundle.js:132587)
    at fg (vendors~main.921ddef01d0b8adf1714.bundle.js:132588)
Ci @ vendors~main.921ddef01d0b8adf1714.bundle.js:132674
f.componentDidCatch.c.callback @ vendors~main.921ddef01d0b8adf1714.bundle.js:132692
Cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132596
Ji @ vendors~main.921ddef01d0b8adf1714.bundle.js:132677
Sj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132720
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Jj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132713
yj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132704
(anonymous) @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
fg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
gg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Ga @ vendors~main.921ddef01d0b8adf1714.bundle.js:132752
gd @ vendors~main.921ddef01d0b8adf1714.bundle.js:132533
vendors~main.921ddef01d0b8adf1714.bundle.js:132674 TypeError: (0 , _api.useArgs) is not a function
    at ControlsPanel (vendors~main.921ddef01d0b8adf1714.bundle.js:5285)
    at oh (vendors~main.921ddef01d0b8adf1714.bundle.js:132618)
    at Rj (vendors~main.921ddef01d0b8adf1714.bundle.js:132726)
    at Qj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at Kj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at yj (vendors~main.921ddef01d0b8adf1714.bundle.js:132704)
    at vendors~main.921ddef01d0b8adf1714.bundle.js:132588
    at push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (vendors~main.921ddef01d0b8adf1714.bundle.js:159049)
    at cg (vendors~main.921ddef01d0b8adf1714.bundle.js:132587)
    at fg (vendors~main.921ddef01d0b8adf1714.bundle.js:132588)
Ci @ vendors~main.921ddef01d0b8adf1714.bundle.js:132674
Xi.c.callback @ vendors~main.921ddef01d0b8adf1714.bundle.js:132691
Cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132596
Ji @ vendors~main.921ddef01d0b8adf1714.bundle.js:132677
Sj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132720
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Jj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132713
yj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132704
(anonymous) @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
fg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
gg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Ga @ vendors~main.921ddef01d0b8adf1714.bundle.js:132752
gd @ vendors~main.921ddef01d0b8adf1714.bundle.js:132533
vendors~main.921ddef01d0b8adf1714.bundle.js:5285 Uncaught TypeError: (0 , _api.useArgs) is not a function
    at ControlsPanel (vendors~main.921ddef01d0b8adf1714.bundle.js:5285)
    at oh (vendors~main.921ddef01d0b8adf1714.bundle.js:132618)
    at Rj (vendors~main.921ddef01d0b8adf1714.bundle.js:132726)
    at Qj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at Kj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at yj (vendors~main.921ddef01d0b8adf1714.bundle.js:132704)
    at vendors~main.921ddef01d0b8adf1714.bundle.js:132588
    at push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (vendors~main.921ddef01d0b8adf1714.bundle.js:159049)
    at cg (vendors~main.921ddef01d0b8adf1714.bundle.js:132587)
    at fg (vendors~main.921ddef01d0b8adf1714.bundle.js:132588)

StoryBlok plugin is throwing an error `TypeError: Cannot set property '$storyapi' of undefined`

Version

@nuxtjs/storybook: v1.0.0
nuxt: v2.14.0

Steps to reproduce

Have storyblok-nuxt in modules
run npx nuxt storybook

What is Expected?

Things to work

What is actually happening?

Error shows up:

templates.plugin.120a7f1d.js:91 Uncaught TypeError: Cannot set property '$storyapi' of undefined
    at templates.plugin.120a7f1d.js:91
    at preview.js:28
    at Array.forEach (<anonymous>)
    at Module../.nuxt-storybook/storybook/preview.js (preview.js:26)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.0 (brushes.stories.js:5)
    at __webpack_require__ (bootstrap:848)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)

Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'

Version

@nuxtjs/storybook: v1.0.1
nuxt: ex: v2.14.0

Steps to reproduce

Install per docs
run npx nuxt storybook

What is Expected?

Per docs, if I use nuxt 2.14 then I don't need to install core-js additionally

What is actually happening?

Core JS complains and running yarn add --dev core-js@3 @babel/runtime-corejs3 fixes this issue

Add issue templates

Can be taken from https://github.com/nuxt/content/tree/dev/.github/ISSUE_TEMPLATE

Not possible to reference custom config file

Is your feature request related to a problem? Please describe.

I'm using nuxt inside of adonis, where the nuxt config is located at config/nuxt.js. This module doesn't appear to allow for you to configure where it reads the config from.

Describe the solution you'd like

A CLI flag to pass in the config file, akin to the nuxt docs (https://nuxtjs.org/guide/commands/) --config-file command.

This would allow you to run the following command to start storybook:

npx nuxt storybook --config-file config/nuxt.js

Describe alternatives you've considered

N/A

Additional context

N/A

Error: Cannot find module 'arg'

Version

@nuxtjs/storybook: 1.0.0
nuxt: 2.14.0

Reproduction Link

Steps to reproduce

Set up basic install

What is Expected?

story book to run

What is actually happening?

yarn nuxt storybook
yarn run v1.22.4
$ /Users/elaniobro/Sites/mySite/node_modules/.bin/nuxt storybook
internal/modules/cjs/loader.js:796
    throw err;
    ^

Error: Cannot find module 'arg'
Require stack:
- /Users/elaniobro/Sites/mysite/node_modules/@nuxtjs/storybook/dist/cli.js
- /Users/elaniobro/Sites/mysite/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/elaniobro/Sites/mysite/node_modules/@nuxtjs/storybook/dist/cli.js:9:31)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/elaniobro/Sites/mysite/node_modules/@nuxtjs/storybook/dist/cli.js',
    '/Users/elaniobro/Sites/mysite/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js'
  ]
}

 FATAL  Failed to run command nuxt-storybook:                                                   10:10:18
Error: Command failed with exit code 1: nuxt-storybook


   ╭────────────────────────────────────────────────────────────╮
   │                                                            │
   │   ✖ Nuxt Fatal Error                                       │
   │                                                            │
   │   Failed to run command `nuxt-storybook`:                  │
   │   Error: Command failed with exit code 1: nuxt-storybook   │
   │                                                            │
   ╰────────────────────────────────────────────────────────────╯

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

nuxt config

....
  /*
   ** Storybook configuration
   */
  storybook: {
    // Options
    port: 4000
  },
...

Receiving error when using --static-dir

Version

@nuxtjs/storybook: 1.2.0
nuxt: 2.14.0

Steps to reproduce

nuxt storybook --static-dir ./src/static

What is Expected?

Run the server serving the static files from the dir specified by the command.

What is actually happening?

And I would recommend too to take a look at the staticDir code because, it is using staticDir: [path.resolve(options.rootDir, nuxt.options.dir.static)],, options.rootDir in most cases will be good but for those using the srcDir in the nuxt.config to change only the src directory files, like me in my project, it won't load the default nuxt static folder.

ERROR No pages directory found

Version

@nuxtjs/storybook: ex: v1.0.0
nuxt: v2.14.0

Steps to reproduce

Fork https://github.com/nuxt-community/storybook/tree/master/examples/manual-setup
npm i
npx nuxt storybook

What is Expected?

Storybook runs

What is actually happening?

Nuxt complains that it can't find pages directory in the /storybook directory

using @storybook/addon-essentials breaks the manual build

Version

@nuxtjs/storybook: 1.2.0
nuxt: v2.14.1

Steps to reproduce

npm i -D @storybook/addon-essentials
Follow the guide here:
https://storybook.nuxtjs.org/manual-setup
npx nuxt-storybook

What is Expected?

Storybook working

What is actually happening?

WARN Unable to find main.js: /Users/alex/fundbox/website_storyblok/Users/alex/fundbox/website_storyblok/storybook/main
info => Loading presets
WARN Unable to find main.js: /Users/alex/fundbox/website_storyblok/Users/alex/fundbox/website_storyblok/storybook/main
info => Loading config/preview file in "/Users/alex/fundbox/website_storyblok/storybook".
info => Loading config/preview file in "/Users/alex/fundbox/website_storyblok/storybook".
WARN We found no files matching any of the following globs:
WARN
WARN ~/components/**/*.stories.@(ts|js)
WARN ~/stories/**/*.stories.js
WARN
WARN Maybe your glob was invalid?
WARN see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
WARN Unable to find main.js: /Users/alex/fundbox/website_storyblok/Users/alex/fundbox/website_storyblok/storybook/main
WARN Unable to close preview build!
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.entry should not contain the item '/Users/alex/fundbox/website_storyblok/node_modules/@storybook/addon-actions/dist/register.js' twice.
ERR!    -> A non-empty array of non-empty strings
ERR!     at webpack (/Users/alex/fundbox/website_storyblok/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at /Users/alex/fundbox/website_storyblok/node_modules/@storybook/core/dist/server/dev-server.js:69:48
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.entry should not contain the item '/Users/alex/fundbox/website_storyblok/node_modules/@storybook/addon-actions/dist/register.js' twice.
ERR!    -> A non-empty array of non-empty strings
ERR!     at webpack (/Users/alex/fundbox/website_storyblok/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at /Users/alex/fundbox/website_storyblok/node_modules/@storybook/core/dist/server/dev-server.js:69:48

Error: Trace: The node type SpreadProperty has been renamed to SpreadElement

Version

Nuxt install with these dependencies.

"dependencies": {
        "@nuxtjs/device": "^1.2.7",
        "cheerio": "^1.0.0-rc.3",
        "core-js": "^3.6.5",
        "graphql": "^15.3.0",
        "graphql-tag": "^2.11.0",
        "lodash": "^4.17.19",
        "node-fetch": "^2.4.1",
        "nuxt": "^2.14.1",
        "nuxt-basic-auth-module": "^1.3.2",
        "nuxt-graphql-request": "^3.0.0",
        "sanitize-html": "^1.27.2"
    },
    "devDependencies": {
        "@nuxtjs/storybook": "^1.2.0",
        "@nuxtjs/style-resources": "^1.0.0",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "eslint": "^7.6.0",
        "eslint-plugin-vue": "^6.2.2",
        "node-sass": "^4.14.1",
        "nodemon": "^2.0.4",
        "prettier": "^2.0.5",
        "prettier-eslint": "^11.0.0",
        "sass-loader": "^9.0.3",
        "svg-inline-loader": "^0.8.2",
        "webfontloader": "^1.6.28"
    }

Steps to reproduce

Install this repo: https://github.com/funkhaus/fuxt/tree/storybook

Install dependencies and then run npx nuxt stroybook

What is Expected?

Storybook builds and works.

What is actually happening?

Build crashes with this error:

Trace: The node type SpreadProperty has been renamed to SpreadElement
    at Object.isSpreadProperty (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/types/lib/validators/generated/
index.js:4624:11)
    at hasSpread (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/babel-plugin-transform-object-rest-spread/lib/index.
js:38:13)
    at PluginPass.ObjectExpression (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/babel-plugin-transform-object-rest
-spread/lib/index.js:234:14)
    at newFn (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/visitors.js:175:21)

    at NodePath._call (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/path/context.js:92:31)
    at TraversalContext.visitQueue (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/context.js:112
:16)
    at TraversalContext.visitSingle (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/context.js:84
:19)
    at TraversalContext.visit (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/index.js:82:17)
    at NodePath.visit (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/path/context.js:99:18)
    at TraversalContext.visitQueue (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/context.js:112
:16)
    at TraversalContext.visitMultiple (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/context.js:
79:17)
    at TraversalContext.visit (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/traverse/lib/index.js:82:17)
Trace: The node type SpreadProperty has been renamed to SpreadElement
    at Object.isSpreadProperty (/Users/drew/Sites/makemake-entertainment-frontend/node_modules/@babel/types/lib/validators/generated/
index.js:4624:11)

... and so on forever

I think it's unrelated, but I also can't get Nuxt Storybook to import .gql files, I get module not found errors. They work fine in regular Nuxt (that's what graphql-tag does).

Need ability to add custom head tags

Is your feature request related to a problem? Please describe.

In Storybook, there is an option to add custom tags to the head. I have not been able to figure out how to do this with nuxt storybook. I need to be able to add certain global variables, but I can't find an option to do so.

Describe the solution you'd like

It would be great to be able to add custom scripts to the header like you can with Storybook.
https://storybook.js.org/docs/configurations/add-custom-head-tags/

Describe alternatives you've considered

I have attempted to set up Storybook with nuxt on its own, but that comes with many other problems that Id rather not deal with.

Additional context

Also copy nuxt webpack rules

See: https://gist.github.com/pi0/51bc07e21c81aa93b09c1b6950ffb402#gistcomment-3261473

Storybook doesn't see custom components

After following the instruction I have this error:

Unknown custom element: <Logo> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The nuxt project was created with a command npx create-nuxt-app, then I added npm install --save-dev @nuxtjs/storybook. Because nuxt version is 2.0.0 I added core-js3. The storybook works but the component is not visible for it.

The story for Logo:

// Logo.stories.js
export default {
    title: "Logo"
  };
  
  export const NuxtLogo = () => "<Logo />";

I tried to update nuxt to 2.14.3 but without result.

Can I have a hint what I'm doing wrong?

Storybook needs either a "main" or "config" file

Version

@nuxtjs/storybook: ^v2.1.0
nuxt: ^2.10.0

Steps to reproduce

Followed basic setup steps

What is Expected?

storybook to run

What is actually happening?

 elaniobro  ~/Sites/ui-github   master ● ? ⍟9  yarn storybook                                                        ✔  7352  08:26:09
yarn run v1.22.4
$ nuxt storybook

 WARN  devModules has been renamed to buildModules and will be removed in Nuxt 3.                                                                                   08:26:27

ℹ Preparing project for development                                                                                                                                 08:26:28
ℹ Initial build may take a while                                                                                                                                    08:26:28
✔ Builder initialized                                                                                                                                               08:26:28
✔ Nuxt files generated                                                                                                                                              08:26:28
ℹ Waiting for file changes                                                                                                                                          08:26:28
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
info @nuxtjs/storybook v2.1.0
info 
info => Loading static files from: /Users/elaniobro/Sites/ui-github/static .
WARN Unable to close preview build!
ERR! Error: No configuration files have been found in your configDir (/Users/elaniobro/Sites/ui-github/.nuxt-storybook/storybook).
ERR! Storybook needs either a "main" or "config" file.
ERR!     at validateConfigurationFiles (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/utils/validate-configuration-files.js:50:11)
ERR!     at loadCustomPresets (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/common/custom-presets.js:19:43)
ERR!     at _default (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/manager/manager-config.js:160:143)
ERR!     at _default (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/dev-server.js:58:51)
ERR!     at buildDevStandalone (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/build-dev.js:438:57)
ERR!     at async Object.buildDev (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/build-dev.js:520:3)
ERR!  Error: No configuration files have been found in your configDir (/Users/elaniobro/Sites/ui-github/.nuxt-storybook/storybook).
ERR! Storybook needs either a "main" or "config" file.
ERR!     at validateConfigurationFiles (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/utils/validate-configuration-files.js:50:11)
ERR!     at loadCustomPresets (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/common/custom-presets.js:19:43)
ERR!     at _default (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/manager/manager-config.js:160:143)
ERR!     at _default (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/dev-server.js:58:51)
ERR!     at buildDevStandalone (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/build-dev.js:438:57)
ERR!     at async Object.buildDev (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/build-dev.js:520:3) {
ERR!   stack: 'Error: No configuration files have been found in your configDir (/Users/elaniobro/Sites/ui-github/.nuxt-storybook/storybook).\n' +
ERR!     'Storybook needs either a "main" or "config" file.\n' +
ERR!     '    at validateConfigurationFiles (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/utils/validate-configuration-files.js:50:11)\n' +
ERR!     '    at loadCustomPresets (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/common/custom-presets.js:19:43)\n' +
ERR!     '    at _default (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/manager/manager-config.js:160:143)\n' +
ERR!     '    at _default (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/dev-server.js:58:51)\n' +
ERR!     '    at buildDevStandalone (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/build-dev.js:438:57)\n' +
ERR!     '    at async Object.buildDev (/Users/elaniobro/Sites/ui-github/node_modules/@storybook/core/dist/server/build-dev.js:520:3)'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Cannot set property 'STORYBOOK_REACT_CLASSES' of undefined

Version

@nuxtjs/storybook: v1.1.0
nuxt: v2.14.1

yarn run dev mode: 'universal' problem...

Can I use third party modules with @nuxt/storybook?

Is it possible to use this with other modules? I have multiple modules that I'm using in my nuxt.config.js but they don't seem to be available in my components rendered in Storybook.

Here's an example of my modules section from nuxt.config

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources',
    '@nuxtjs/prismic',
    'portal-vue/nuxt'
  ],

Add abstracted nuxt components

Mostly nuxt-link should be abstracted as it shouldnt perform any navigation.

I've copied this from some nuxt-storybook config I found, but cant remember which one anymore so I cant give proper credits unfortunately. Instead of navigating it logs an action

Vue.component('nuxt-link', {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    log() {
      action('link target')(this.to)
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>'
})

Error onNuxtReady with @nuxt/content

Version

@nuxtjs/storybook: v1.0.0
@nuxtjs/content: v1.5.3
nuxt: v2.14.0

Error in console

Uncaught TypeError: window.onNuxtReady is not a function NuxtJS 3 default plugins js Webpack 7 __webpack_require__ fn 0 __webpack_require__ checkDeferredModules webpackJsonpCallback <anonymous> plugin.client.js:37 NuxtJS 2 forEach self-hosted:216 js NuxtJS Webpack 7

What is Expected?

Storybook runs

What is actually happening?

Override nuxt.config

Some nuxt.config options might not be that useful for a storybook build but do influence the webpack config. See #3, a solution for that specific example could also be to just disable extractCSS for storybook builds

Create single nuxt storybook setup method

This module should export a setup method you can call in .storybook/preview.js to setup all your nuxt plugins, nuxt components etc, css styles

Can we add custom configuration to addons?

I have the addon @storybook/preset-scss and I would like to prepend a custom variables file to all SCSS files, and to do so I need to add some custom configurations. However, when I add it I get the message MODULE NOT FOUND.
Here is the configuration I'm using (Which I'm already using in another Storybook project but that one isn't currently using @nuxt/storybook):

addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        rule: {
          include: [/\.sass$/],
        },
        sassLoaderOptions: {
          prependData: `@import '${customVariablesPath}'`,
          sassOptions: {
            indentedSyntax: true
          }
        },
      }
    },
    {
      name: '@storybook/preset-scss',
      options: {
        rule: {
          include: [/\.scss$/],
        },
        sassLoaderOptions: {
          prependData: `@import '${customVariablesPath}';`,
        },
      }
    },
  ]

Simple example not working - error in console

Version

@nuxtjs/storybook: v1.0.0
nuxt: v2.14.0

Reproduction Link

https://github.com/nuxt/nuxtjs.org/tree/test-storybook

Steps to reproduce

run the dev command for storybook and check console

What is Expected?

should show stories. followed example as per docs with Link.vue and Link.stories.js. Also updated all packages with fresh install etc just incase but still get error.

What is actually happening?

page is not loading properly

Serve nuxt static files

Is there any way to serve the static files as we have in the storybook CLI using the storybook -s ./static? Or we could just have the nuxt static served by default when the storybook is up.

Storybook unable to access fetch hook

Version

@nuxtjs/storybook: 1.2.0/2.0.0
nuxt: 2.14.1

Reproduction Link

https://codesandbox.io/s/nuxt-storybook-fetchtest-44tml?file=/components/FetchTest.vue

Steps to reproduce

Create a Nuxt.js storybook project.
Create a component and story with async fetch hook.
Storybook fails to run fetch hook, cannot access $fetch or $fetchState.

What is Expected?

@nuxtjs/storybook should have access to async fetch hook.

What is actually happening?

@nuxtjs/storybook does not run fetch hook, fails silently. Trying to run $fetch() on button click, or conditionally render markup with $fetchState throws error: "Property or method "$fetch" is not defined on the instance but referenced during render"

Automatically copy webpack config requirements for nuxt config options

Some nuxt config options also require additional webpack config, eg using build.extractCSS: true in your nuxt.config requires that the ExtractCssChunksPlugin is also added because otherwise you will get the following error:

Error: No module factory available for dependency type: CssDependency

If there are more config options like this, we probably need to handle these manually

Reload TailwindCSS classes

I've just set up a project with TailwindCSS. While working on a component I noticed that classes do not reload on change. For example, if I wanted to modify a padding p-2 to p-4, I have to completely reload Storybook. I've noticed this behavior in the example too.

Is there anything I can do to make them reload on save?

Bootstrap of `./.nuxt-storybook/storybook/preview.js` does not support asynchonous Nuxt.js plugins

Version

@nuxtjs/storybook: 1.2.0
nuxt: 2.14.1

Reproduction Link

https://codesandbox.io/s/musing-sun-7lco1?file=/components/Dummy.vue

Steps to reproduce

Create a Nuxt.js project
Add @nuxtjs/storybook and @nuxtjs/prismic (contains an asynchronous plugin)
Create a component and its story using a method provided by the Prismic module (on the sandbox: asText)
Run Storybook
Story fails because Cannot read property '<method>' of undefined

What is Expected?

@nuxtjs/storybook should handle asynchronous plugins too when resolving plugins.

What is actually happening?

@nuxtjs/storybook doesn't handle asynchronous plugins when resolving plugins. This happens because methods provided by @nuxtjs/prismic are injected through an async Nuxt.js plugin, here this module is just used as an example.

I tried few things but so far I have no idea how to fix that one 🤔

Runtime Config not working

Version

@nuxtjs/storybook: v2.1.0
nuxt: v2.14.1

Steps to reproduce

Add a publicRuntimeConfig to nuxt.config.js
Try to access it inside one of the components

What is Expected?

To return the value that was set in nuxt.config.js

What is actually happening?

It returns undefined

The relative module was not found

Version

@nuxtjs/storybook: 1.1.0
nuxt: 2.14

Steps to reproduce

npx nuxt storybook

What is Expected?

Work properly with Bootstrap scss files.

What is actually happening?

The build process crashes with the following message:

ERROR  Failed to compile with 1 errors                                                                               
This relative module was not found:                                                                                   
* ./assets/scss/global.scss in ./.nuxt-storybook/storybook/preview.js

My nuxt.config.js is like this:

storybook: {
    // Options
    webpackFinal (config, { configType }) {
      // manipulate webpack config
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: resolve(__dirname, '../')
      }, {
        test: /\.s?css$/,
        loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader'
      })
      return config
    }
  }

EDIT: I just realized that inside preview.js in (.nuxt-storybook/storybook), there is this line, that obviously isn't working:
import './assets/scss/global.scss'
EDIT 2: Apparently, that line is being generated from this other one in nuxt.config.js

which causes the following error (and I can't make anything of it):

nuxt-modules / storybook Goto Github PK

storybook's Introduction

Nuxt Storybook

Installing

Demo

Features

Nuxt 2

Contributing

License

Contacts :

storybook's People

Contributors

Stargazers

Watchers

Forkers

storybook's Issues

Version

Steps to reproduce

What is Expected?

What is actually happening?

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Version

Version

Steps to reproduce

What is Expected?

What is actually happening?

Version

Steps to reproduce

What is Expected?

What is actually happening?

Version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Version

Steps to reproduce

What is Expected?

What is actually happening?

Version

Steps to reproduce

What is Expected?

What is actually happening?

Version

Steps to reproduce

What is Expected?

What is actually happening?

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

nuxt config

Version

Steps to reproduce

What is Expected?

What is actually happening?

Version

Steps to reproduce

What is Expected?

What is actually happening?

Version

Steps to reproduce