How to install storybook with vue + type script

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 text

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 ?

[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,
    },
  }
}

[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