@ryotah/storybook-preset-nuxt v0.1.0-beta.2

Storybook Nuxt preset

This is a Storybook preset for a Nuxt application.

Installation

$ npm i -D @ryotah/storybook-preset-nuxt

Basic Usage

Once installed, add this preset to ./.storybook/main.js

Here is a example.

import * as path from 'path';

const rootDir = path.resolve(__dirname, '../');
const srcDir = path.resolve(__dirname, '../src');

module.exports = {
  addons: [
    {
      name: '@ryotah/storybook-preset-nuxt',
      options: {
        rootDir,
        srcDir,
        postcssPlugins: () => [
          // These postcss plugins should be the same as your nuxt application's postcss plugins.
          // Refs:
          // - https://nuxtjs.org/api/configuration-build/#postcss
          // - https://github.com/nuxt/nuxt.js/blob/v2.11.0/packages/webpack/src/utils/postcss.js#L52
          require('postcss-import'),
          require('postcss-url'),
          require('postcss-preset-env')({
            autoprefixer: {},
          }),
        ],
      },
    },
  ],
};

Nuxt Components

This package includes the componentsRegister function. You can call it in ./.storybook/preview.js to stub nuxt components like <client-only> and <nuxt-link>.

Check @storybook/addon-actions is already added to your devDependencies, before using componentsRegister function.

import { componentsRegister } from '@ryotah/storybook-preset-nuxt/lib/helpers/components-register';
componentsRegister();

Example

Some examples will be added.

License

This project is an MIT-licensed open source project. See LICENSE for more information.