Storybook nuxt build does not includes decorators

user_1627640 0
Viewed 1091

TLDR: Problem with nuxt + storybook + vuetify build

I've created a new project using Nuxt.js, Vuetify, and Storybook.

The Storybook dev server is working great, I only had to add a single decorator to the nuxt config:

// nuxt.config.js
storybook: {
    decorators: [
      // VApp decorator for Vuetify
      '<v-app><div><story/></div></v-app>',
    ],
  },

The only problem that is seems that when running the build it does not load the decorators so the Storybook does not represent the visual aspect properly.

// package.json
"storybook": "nuxt storybook",
"storybook:build": "nuxt storybook build"

Note: I did use the official nuxt storybook

Example of Dev:

enter image description here

Example of Build:

enter image description here

storybook nuxt.js vuetify.js vue.js
1 Answers

OK so it took me a few trials and errors but I've made it work.

1) Add Vuetify as a plugin

The first thing that we would like to do is create a vuetify.js file in the plugin directory

.
├── plugins
│   └── vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';
import { themes } from '~/config/themes';

import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default (ctx) => {
  const vuetify = new Vuetify({
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    options: {
      customProperties: true,
    },
    theme: {
      themes: {
        light: {
          ...themes.light,
        },
      },
    },
  });
  ctx.app.vuetify = vuetify;
  ctx.$vuetify = vuetify.framework;
};

2) Update nuxt config to load Vuetify

In your nuxt.config.js make sure you remove the Vuetify config and add vuetify as a plugin like so:

// nuxt.config.js
  plugins: ['@/plugins/vuetify.js'],

3) Add Storybook Decorator

Add a Vuetify decorator to support Vuetify in all of the Storybook stories.
In your nuxt.config.js add the following decorator

// nuxt.config.js

  storybook: {
    // Options
    decorators: [
      // VApp decorator for Vuetify
      `<v-app id='vuetify-storybook-decorator'><div><story/></div></v-app>`,
    ],
  },

4) Fix Storybook Visibility

To prevent eatch story taking too full screen height and allowing presenting more then a single story in a view, we would override the default vuetify min-height only in storybook;

In your nuxt.config.js file load a storybook.scss like so

// nuxt.config.js

 // Global CSS (https://go.nuxtjs.dev/config-css)
 css: ['@/assets/storybook.scss'],

And in your assets folder add the storybook.scss file:

.
├── assets
│   └── storybook.scss

/* storybook.scss */

#vuetify-storybook-decorator {
  // Remove the storybook full height of all components
  .v-application--wrap {
    min-height: unset;
  }
}

5) Build the project

Add the build comand to your package.json

// package.json
{
    "storybook": "nuxt storybook",
    "storybook:build": "nuxt storybook build"
}

Then run in the command line yarn storybook:build

The build will be placed in /storybook-static; You can view the build by running any server on that folder, for example:

$ npx http-server ./storybook-static

That's it, I hope it would be helpfull:)

user_16276400
Related