Basics: Storybook for Vue + Meteor

I’m looking for a resource on setting up vue-play with Meteor. Is there an example repo out there? And posts on this?

This article goes into some detail, but is not meant for a Meteor project: https://dweldon.silvrback.com/vue-play

4 Likes

While I didn’t try to use it with the Meteor build system, I’m able to use it with the default webpack configuration of vue-play-cli. So it’s not like you actually have to make it work through Meteor for vue-play to display the Vue components of your Meteor project.

Remember that you need at least Node 4 to make it work.

1 Like

Since vue-play is a devtool to help you build components, you don’t necessarily need to make it work with meteor.

2 Likes

Thanks. Will you drop a example repo please when you have a chance?

Notice that even the original React Storybook is meant primarily for UI components, not for smart component that depend on reactive Meteor data.

Here is what I did:

npm i -g vue-play-cli
$ cd ~/web/my-vue-project
meteor npm install vue-play

play.js

import {play} from 'vue-play'
import MyComponent from './imports/ui/MyComponent.vue'

play('MyComponent', module)
  .add('James Bond', h => h(MyComponent, {props: {name: 'James',surname: 'Bond'}}))

/imports/ui/MyComponent.vue

<template>
  <h1>My name is {{surname}}, {{fullname}}</h1>
</template>
<script>
export default {
  props: ['name', 'surname'],
  computed: {
    fullname() {
      return this.name + ' ' + this.surname
    }
  }
}
</script>

Now do:

vue-play start ./play.js

And the result is:

2 Likes

There’s this new vue build Component.vue feature of vue-cli that may help you with fast prototyping if that’s what you wanted to use vue-play for. Comes with an advantage of being a core package.

2 Likes

@gusto, this is awesome! Thank you for sharing with us!