Storybook: Does the module depend on nuxt/components and the `components: true` option in nuxt.config.js? If so, we should mention this in the docs

Created on 24 Feb 2021  路  3Comments  路  Source: nuxt-community/storybook

I tried to add @nuxtjs/storybook to an existing project but ran into issues (#233). Eventually, I tracked the problem down - my .nuxt-storybook/storybook/preview.js file wasn't importing any components, and my .nuxt-storybook/components/index.js file was missing too.

I realised the issue was that I hadn't set components: true in my nuxt.config.js file - this seems to be a requirement, but it isn't mentioned on https://storybook.nuxtjs.org/setup.

My question is, does the module depend on nuxt/components and the components: true option in the nuxt.config.js file? If it does, then we should update the documentation to let people know. I can raise a PR if it's confirmed that my assumption about the dependency is correct :)

question

Most helpful comment

Examples from the documentation assume the option components: true is used, but it is not a requirement.
Without nuxt/components, just import components as usual.
For instance:

const Template = (args, { argTypes }) => ({
  components: {
    VButton: () => import('~/components/VButton'),
  },
  props: Object.keys(argTypes),
  template: '<VButton v-bind="$props" />',
})

All 3 comments

Examples from the documentation assume the option components: true is used, but it is not a requirement.
Without nuxt/components, just import components as usual.
For instance:

const Template = (args, { argTypes }) => ({
  components: {
    VButton: () => import('~/components/VButton'),
  },
  props: Object.keys(argTypes),
  template: '<VButton v-bind="$props" />',
})

I think @bodrych explain it very well.
BTW I think it worths mentioning in the docs. Contributions is more that welcome :slightly_smiling_face:

I've raised #240 which adds a warning to say that:

The example below assumes you have the components: true option set in nuxt.config. If not, you will need to import the components yourself.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dankellett picture dankellett  路  3Comments

farnabaz picture farnabaz  路  6Comments

ponnex picture ponnex  路  5Comments

altryne picture altryne  路  4Comments

dChiamp picture dChiamp  路  3Comments