• Fixed: Mixins aren't applied #80

• Fixed: Updated examples (#77)
• Updated: README (#76 by @philwolstenholme)
• Feat: Add support for single file component format (#79 by @mrjones2014)

You can create complex examples in two ways:

1. Create a new Vue instance

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

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

2. Single-file components with a language tag of vue

```vue
    <template>
    <div>
        <Button @click.native="pushButton">Push Me</Button>
        <hr />
        <p>Next Dog Name: {{ dogName }}</p>
    </div>
    </template>

    <script>
    const dogNames = require('dog-names').all;

    // You can also use 'exports.default = {}' style module exports.
    export default {
        name: 'ButtonExample',
        data() {
        return { numClicks: 0, dogName: dogNames[0] };
        },
        methods: {
        pushButton() {
            this.numClicks += 1;
            this.dogName = dogNames[this.numClicks];
        }
        }
    }
    </script>
```

https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Documenting.md#usage-examples-and-readme-files

• Fixed: Issue #64 PR #73

• Added: New feature, styleguide with navigation. #26

You can add this property in styleguide.config.js to added a navigation.
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Configuration.md#navigation

Example
https://github.com/vue-styleguidist/vue-styleguidist/tree/master/examples/navigation

• Updated: Updated with [email protected]
• Updated: [email protected]
• Added: Sections example
• Fix: #71

React-styleguidist's updating

Allow ignore to be specified at section level

module.exports = {
  sections: [
    {
      name: 'UI Components',
      content: 'docs/ui.md',
      components: 'lib/components/*.js',
      ignore: '**/components/Button.js',
    }
  ]
}

Tweak CLI a bit

Bug fixes and small stuff with

• Clear console only on hot reload
• Use webpack.DefinePlugin as recommended by webpack docs
• Add buttonTextTransform variable to theme
• Improve the sidebar scroll UX for touch devices
• Update to new version of markdown-to-jsx which is significantly smaller
• Change code tab button caption from “Code” to “View Code”
• Allow overriding default webpack dev server options
• Reload dev server when assets change
• Pass NODE_ENV to webpack's definePlugin
• Fix navigation between list and isolated mode issues
• Correct whitespace around error messages with noeditor modifier
• Correct URL of the isolated mode of the first example
• Initialize logger before config validation (fixes previously hidden config warning)
• Disable clean-webpack-plugin debug info unless we are in verbose mode

• Updated: [email protected]
• PR: #58 #56 #50
• Fixed: #51

• 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