vue-styleguidist

• Fix: Fix #43
• Fix: Fix #41

Slots documentation

For default, Vue styleguidist doesn't document the slots, you need to add a comment before of slot inside of the template.

<template>
  <div class="modal">
    <div class="modal-container">
      <div class="modal-head">
        <!-- @slot Use this slot header -->
        <slot name="head"></slot>
      </div>
      <div class="modal-body">
        <!-- @slot Use this slot body -->
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>

• Fixed: Fix line ending in styleguidist.js #36

• Fixed: Fix validation error for uglifyjs-webpack-plugin #34
• Fixed: Correctly print non-Styleguidist exception messages #35

• Fixed: #31

• Fixed: Update deps
• Update: Added support for event documentation and v-model

Event

For events documentation

/**
 * Success event.
 *
 * @event success
 * @type {object}
 */
this.$emit('success', {
  demo: 'example',
})

V-model

If you want to create a custom v-model, you have to add model tag in comment

<script>
export default {
  name: 'my-checkbox',
  props: {
    /**
     * @model
     */
    value: String
  }
}
</script>

• Updated: Updated with [email protected]
• Fixed: Migrate to react-codemirror2 (#22)
• Updated: You can also add the custom block <docs></docs> inside *.vue files, so that styleguidist builds the readme. You can review the following example (#18)
• PR : Update package.json webpack & vue-webpack-loaders for basic example (#20)

• Fixed: Styles were not compiled, had to be returned to a stable version of jss
• Updated: Updated [email protected] (#16)
• Updated: Updated with [email protected]

Changed fenced code blocks handling in Markdown

Any code block with a language tag of js, jsx or javascript will be rendered as a Vue component with a interactive playground.

Vue component example:

  ```jsx
      <Button size="large">Push Me</Button>
  ```

  One more with generic code fence:

  ```
  <Button size="large">Push Me</Button>
  ```

  You can disable an editor by passing a `noeditor` modifier:

  ```jsx noeditor
  <Button>Push Me</Button>
  ```

  To render an example as highlighted source code add a `static` modifier:

  ```jsx static
  <Button>Push Me</Button>
  ```

  You can also initialize vue to construct more complex examples

  ```js
  const names = require('dog-names').all;

  new Vue({
    data(){
      return {
        list: names
      }
    },
    template: `
      <div>
        <RandomButton :variants="list" />
      </div>
    `
  })
  ```

  Examples with all other languages are rendered only as highlighted source code, not an actual component:

  ```html
  <Button size="large">Push Me</Button>
  ```

Fenced code blocks without a language or indented code blocks are rendered as before: with an interactive playground.

A custom example language for fenced code blocks was removed.

You can customize this behavior with the new updateExample config option. For example you can use it to load examples from files:

module.exports = {
  updateExample: function(props) {
    const { settings, lang } = props;
    if (typeof settings.file === 'string') {
      const filepath = settings.file;
      delete settings.file;
      return {
        content: fs.readFileSync(filepath),
        settings,
        lang,
      }
    }
    return props;
  }
};

Use it like this in you Markdown files:

```js { "file": "./some/file.js" }
```

Removed webpack 1 support

Webpack 2+ is required now.

• Updated: Updated with [email protected]
• Updated: [email protected]

• Updated: vue v.2.4.1

• Updated: [email protected]

• Fix: Added webpack 3 support #9
• Updated: The documentation was updated #8

• Updated: vue-docgen-api

• Fixed: The tag ignore was fixed. #6
• Updated: Already documents the mixins

• Fixed: The name of the component is equal to the property defined in the name component, this is required #2
• Enhancement: Added mixins configuration #5

Updated dependency vue-docgen-api and docs

Update repository

Update project

Update project

Initial project