よせなべ

プログラミングを入れた鍋にガジェットやゲームなど様々な材料を入れて煮込みます。

Nuxt.js で Storybook を始める

Nuxt.js Vue.js

方法
環境
参考

方法

yarn create nuxt-app <project-name>
cd <project-name>
yarn global add @storybook/cli #ない場合
getstorybook init

// .storybook/webpack.config.js

const path = require('path')
const rootPath = path.resolve(__dirname, '../')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css?$/,
        loaders: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'url-loader',
        query: {
          limit: 1000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 1000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.vue'],
    alias: {
      '@': rootPath,
      '~': rootPath,
    }
  }
}

// stories/index.stories.js

import { storiesOf } from '@storybook/vue'
import Logo from '~/components/Logo.vue'

storiesOf('components', module)
  .add('Logo', () => ({
    components: { Logo },
    template: '<Logo />'
  }))

yarn storybook

環境

Windows 10
Nuxt.js 2.4
Storybook 5.0.11

参考