storybook 5 config files for vue project

addons.js

// .storybook/addons.js

import '@storybook/addon-knobs/register'
import '@storybook/addon-a11y/register'
import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'

components.js

// src/utils/components.js

import Vue from 'vue'

Vue.component('InputText', () =>
  import(/* webpackChunkName: "C-InputText" */ '@c/InputText')
)
Vue.component('Checkbox', () =>
  import(/* webpackChunkName: "C-Checkbox" */ '@c/Checkbox')
)
// ...

config.js

// .storybook/stories.js

import Vue from 'vue'
import { addParameters, addDecorator, configure } from '@storybook/vue'

import '@styles/common.css'
import '@utils/components'
import i18n from '@/i18n'

import vOutsideEvents from 'vue-outside-events'
import VeeValidate from 'vee-validate'

Vue.use(vOutsideEvents)
Vue.use(VeeValidate, {
  events: 'input|blur',
  errorBagName: 'veeErrors',
  fieldsBagName: 'veeFields',
  inject: false
})

function Container() {
  return {
    template: '<div style="padding: var(--space-4)"><story/></div>',
    i18n
  }
}

addDecorator(Container)

addParameters({
  options: {
    // isToolshown: false
  }
})

configure(function() {
  require('./stories')
}, module)

i18n.js

// src/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// $vm0.$store.commit("Global/LANG_CHANGE", {lang: "tr", app: $vm0}, {root: true})

const i18n = new VueI18n({
  locale: 'tr',
  messages: {tr: { hi: "Selam!" }, en:{ hi: "Hi!" }},
})

export default i18n

stories.js

// .storybook/stories.js

// Welcome
import '@c/Welcome/stories'

// Atoms
import '@c/Typography/stories'
import '@c/ColorPalette/stories'
import '@c/Icon/stories'
import '@c/Checkbox/stories'
import '@c/Loading/stories'

// Elements
import '@c/Btn/stories'
import '@c/BtnSelect/stories'
// ...

webpack.config.js

// .storybook/webpack.config.js

const path = require('path')

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.css$/,
    loaders: ['postcss-loader'],
    include: path.resolve(__dirname, '../')
  })
  config.resolve = {
    ...config.resolve,
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, '../src/'),
      '@styles': path.resolve(__dirname, '../src/styles/'),
      '@utils': path.resolve(__dirname, '../src/utils/'),
      '@c': path.resolve(__dirname, '../src/component/')
    }
  }

  return config
}