vcd

vue-component-doc

Document Vue Components

Showing:

Popularity

Downloads/wk

39

GitHub Stars

5

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

5

Size (min+gzip)

217.0KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-component-doc

Document Vue Components

Introduction

A vue component built to document other vue component by auto generating a form to interact with the props. This component works with all components created to be an object, Vue.extend, and typescript Vue Class Components. Please checkout the demo in repo for additional usage information.

Installation

npm install vue-component-doc

const Vue = require('vue') Vue.use(require('vue-component-doc'))

Usage

  <component-doc :component="my_component" :presets="my_presets" :full_screen="true" :resizable="true"><component-doc/>

Props

component: Component to be documented (Object, Function)

this can be a vue class base component or a object that needs to be instantiated with new Vue.

full_screen: Full Screen Mode (Boolean)

default: false by default the component doc display the properties and documentation in two column on large screen size. This prop force doc to full screen width at all display sizes.

resizeable: Allow adjusting the size of component displaying area

default: false if adjustable the initial size will be the size of the component. and can be resize to any width or height based on available space on your screen.

presets: Presets (Object)

presets is a system to deliver some sample data to a component via props using vue-component-doc

presets are shown as a select dropdown with each option labeled by the specified name

  const presets = {
    my_prop_name: [
      {
        name: "my preset name",
        preset: Any
      }
    ]
  }

vue-component-doc will also auto generate name using your prop name or use the name property of objects.

  const presets = {
    my_string_prop: [
      'my_string_prop1',
      'my_string_prop2'
    ]
  }
  const presets = {
    my_object_prop: [
      {
        name: 'my object 1'
      },
      {
        name: 'my object 2'
      }
    ]
  }

Built @ Promoboxx Logo

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100