Skip to content
This repository has been archived by the owner on Jan 5, 2023. It is now read-only.

Support for vuejs #22

Open
husayt opened this issue Jan 23, 2018 · 5 comments
Open

Support for vuejs #22

husayt opened this issue Jan 23, 2018 · 5 comments

Comments

@husayt
Copy link

husayt commented Jan 23, 2018

I can see vue tag in project's description, but couldn't get it working. Is Vuejs supported and if yes I would appreciate for a simple example.

Thanks

@ndelangen
Copy link
Contributor

ndelangen commented Jan 23, 2018

Thank you for your interest, right now there's no vue support I'm pretty sure. I haven't tested.

Would be interested in hearing thoughts on how to support it.
For now I've removed the project tag. sorry for the confusion.

@davidm-public
Copy link

+1 for Vue support

@husayt
Copy link
Author

husayt commented Feb 16, 2018

Actually, it should be doable, as vue also requires full definition of all component params.

You can get more details here. But as you can see from the example below, props have types (Number, Boolean, String, Object, Array, Symbol, Function) defined and that information can be extracted to provide smart knob functionality.

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

I added a sample storybook vuejs project here in case someone wants to try. Would be great to find way to support smart knobs in vue.

@elevatebart
Copy link

@ndelangen is it still a project in the works?
Should I start putting together a PR based on vue-docgen-api?

@shilman
Copy link
Contributor

shilman commented May 2, 2020

@elevatebart Storybook 6.0 includes Args, which will replace knobs at some point in the 6.x cycle.

I just added automatic args-based controls for Vue in this PR:

https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit#heading=h.6mdg0tp8crgj

Knobs is widely used, so improving smart-knobs will benefit everybody who prefers that API, or is stuck using it. Helping out with Args for Vue would also be a useful way to contribute!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

5 participants