Storybook: How to install storybook with vue + type script

[no0dly]

Hello, I'm trying to install storybook with vue+typescript

I have used this article and comments as a manual.

After all of this I have an error in dev tools console: [Vue warn]: Cannot find element: #root
And page automatically redirects to http://localhost:6006/?selectedKind=Button&selectedStory=with%20text

webpack.config.js :
const merge = require('webpack-merge')

const genStorybookDefaultConfig = require('@storybook/vue/dist/server/framework-preset-vue.js')
  .webpack
const vueConfig = require('@vue/cli-service/webpack.config.js')
module.exports = (storybookBaseConfig, configType) => {
  const storybookConfig = genStorybookDefaultConfig(
    storybookBaseConfig,
    configType
  )
  return {
    ...vueConfig, // use vue's webpack configuration by default
    entry: storybookConfig.entry, // overwite entry
    output: storybookConfig.output, // overwrite output
    // remove duplicated plugins
    plugins: merge({
      customizeArray: merge.unique(
        'plugins',
        [
          'HotModuleReplacementPlugin',
          'CaseSensitivePathsPlugin',
          'WatchMissingNodeModulesPlugin',
          'VueLoaderPlugin'
        ],
        plugin => plugin.constructor && plugin.constructor.name
      )
    })(vueConfig, storybookConfig).plugins,
    resolve: {
      ...vueConfig.resolve,
      alias: {
        ...vueConfig.resolve.alias,
        vue$: storybookConfig.resolve.alias.vue$
      }
    }
  }
}

config.js:

import { configure } from '@storybook/vue'

// automatically import all files ending in *.stories.ts

const req = require.context('../src/stories', true, /.stories.ts$/)

function loadStories() {
    req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

index.stories.ts :

/* eslint-disable react/react-in-jsx-scope, react/no-this-in-sfc */

import { storiesOf } from '@storybook/vue'

import { action } from '@storybook/addon-actions'

// import { linkTo } from '@storybook/addon-links'

import MyButton from './MyButton.vue'

storiesOf('Button', module)
  .add('with text', () => ({
    components: { MyButton },
    template: <my-button @click="action">Hello Button</my-button>
    methods: { action: action('clicked') }
}))
 .add('with some emoji', () => ({
   components: { MyButton },
   template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
   methods: { action: action('clicked') }
  }))
    /* eslint-enable react/react-in-jsx-scope */

Repo
Any thoughts ?

[francoisle]

Hello, I had this issue some days ago and I solved it with this webpack config:

// .storybook/webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html');

  defaultConfig.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true // used with ForkTsCheckerWebpackPlugin
        },
      }
    ],
  });

  defaultConfig.plugins.push(new ForkTsCheckerWebpackPlugin());

  return defaultConfig;
};

I have a minimal working example using this config here: https://github.com/francoisle/vue-storybook-ts

Hope it helps

[no0dly]

@francoisle Thank you very much, it works!

[mateuszgachowski]

If someone still has problems with it this should help :)

const vueConfig = require('@vue/cli-service/webpack.config.js');

module.exports = async ({ config }) => {
  return {
    ...config,
    resolve: {
      ...vueConfig.resolve,
      alias: {
        ...vueConfig.resolve.alias,
        'vue$': 'vue/dist/vue.esm.js' // if you need it
      },
    },
    module: {
      ...vueConfig.module,
      rules: vueConfig.module.rules,
    },
  }
}

[justinhodev]

Thanks @mateuszgachowski , I finally got it to compile with your config.

But I want to mention that the line 'vue$': 'vue/dist/vue.esm.js' seems to be mandatory for starting storybook interactively because without it but no Vue component gets rendered and the warning

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

shows up on console.

[mateuszgachowski]

Thanks for trying the config @justinhodev
It depends what kind of components you are compiling - if you use render functions it will work without this alias.

// Here you do not have to use esm
import SomeComponent from 'SomeComponent.vue';
new Vue({
  render: (h) => h(SomeComponent)
})

vs

// Here you need to use ESM alias
import SomeComponent from 'SomeComponent.vue';
new Vue({
  components: { SomeComponent }
  template: '<SomeComponent />',
})

See:
https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Probably you are using the template option, that is why esm build is required.

Hope it explains why it didn't work without it :)

Cheers,
Mateusz

[Saitop]

    resolve: {
      ...vueConfig.resolve,
      alias: {
        ...vueConfig.resolve.alias,
        'vue$': 'vue/dist/vue.esm.js' // if you need it
      },
    },

hello, after i set as your way, I got an 'cache-loader' not found issue, any thought about it?