vueらしい書き方でstorybookを使う

vueのプロジェクトでstorybokを入れようとしたときにvueらしい書き方で行いたいと思ったのでその時のメモ

環境

• Rails
• Vue.js
• Webpacker

webpackerは今回関係ないですが、念のため

実行まで

今回参照するvueファイル

<template lang="pug">
  div
    p 
      | {{ message }}
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloVue extends Vue {
  message : string = 'Hello Vue!'
}
</script>

<style lang="scss" scoped>
p {
  font-size: 2em;
  text-align: center;
  color: #0ff;
  span {
    font-size: 3rem;
  }
}
</style>

手順

1. .storybook/config.js の編集

今回は /app/frontend/components の中を参照する。

変更前

const req = require.context('../stories', true, /\.stories\.js$/);

変更後

const req = require.context('../app/frontend/components/', true, /\.stories\.(vue|js)$/);

2. index.stories.vueを作成

これでディレクトリ中の storis.vue が読み込まれるようになったので、以下のファイルで作成する。
※現状このまま入れるだけでは動かないです。次のステップで動くようになります。

<template lang="pug">
  test
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
import { storiesOf } from '@storybook/vue'

import Test from './index.vue'

@Component({
  components: {
    Test
  },
})
export default class testStory extends Vue{}

storiesOf('Welcome', module)
  .add('to Storybook', () => testStory)
</script>

3. storybookのほうで pug と typescript の読み込みを行われるようにする

現状storybookのほうで pug と typescript が読み込まれないと思うので、 ./storybook/webpack.config.js を作成する

• webpack.config.js

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

module.exports = ({ config }) => {
  config.resolve.alias['vue'] = 'vue/dist/vue.esm.js'
  config.module.rules.push(
    {
      test: /\.ts$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/],
            transpileOnly: true
          }
        },
      ]
    },
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
      test: /\.pug$/,
      loaders: 'pug-plain-loader',
    }
  )
  return config
}

これで既存のvueらしい書き方でstorybookも書くことができると思います。