2.1.1 (2018-12-04)

Bug Fixes

• remove invalid protection of null tags (c609faa)

2.1.0 (2018-12-03)

Features

• Add custom properties to the JSdoc (54e69d4)

2.0.2 (2018-11-23)

Bug Fixes

• ci: reinstall node-fetch... (2f4ea06)
• ci: stop artificially install node-fetch in release (7f0dbd8)

2.0.1 (2018-11-22)

Bug Fixes

• ci: again fix semantic release (load the version) (991cfbd)
• ci: rolback it all (03e67de)
• ci: try using version 15.12 of semantic-release (64fced9)
• ci: update node-fetch to a version compatible with github (6192864)
• editor: html was rendered automaticaly by mistake (a304c86), closes #234

2.0.0 (2018-11-19)

Bug Fixes

• webpack 4 warning (9090878)
• ci: add compilation before release stage (e744161)
• ci: condition release and doc stage (e955f67)
• ci: remove all mentions of webpack 3 (8a04486)
• ci: remove deploy from semantic release (5920881)

Features

• update react-styleguidist to 8.0 (44fa196), closes #229
• ci: add caching to travis (e4bf61b)

BREAKING CHANGES

• Webpack 3 support dropped

1.9.0 (2018-11-12)

Features

• ci: Automated Semantic release (#228) (5c80183)

update buble to fix issue #217

Fix crlf issue blocking linux users

Fix: #200 Unknown language: "vue"

• Fix: revert security audit changes

• Chore: updated vue-docgen-api for vue-cli
• Chore: fixed some npm audit issues

• Fix: Added ignore in schema #191
• Docs: Lick → Click
• Feat: Updated react-styleguidist

• Feat: Updated [email protected]
• Feat: Updated [email protected]

Support jsx renderer

Example:

<script>
// Button.vue
/**
 * This is a Button
 * @version 1.0.5
 */
export default {
  name: 'btn',
  render() {
    return <button>Click me</button>
  }
}
</script>

Feature developed by @hellosean1025

External links in sections

Two new flags in the sections config:

• href — An URL to navigate to instead of navigating to the section content
• external — If set, the link will open in a new window

• Updated [email protected]
• Updated vue-docgen-api
• Feat pagePerSection
• Refactor rsg-components
• 1.8.0

• Updated: vue-docgen dependency
• Feat: vue-cli 3.x support (#137 by @elevatebart) #127
• Feat: Added test cases (by @elevatebart)
• Fix: IE support with navigation enabled (#83)

Vue-CLI 3.x support

If you’re using vue-cli 3.x you can skip the webpack configuration 👍

• Updated: vue-docgen-api
• Fix: Support ie11 #83

• Fix: Fixed #120

• Fix: Fix #116
• Updated: vue-docgen-api
• Feat: New configuration prop renderRootJsx
• Feat: New example with vuetify and vue-i18n
• Updated: Cookbok.md

How to add data dummy and third-party plugins to the style guide?

If you need to have default data for use in the examples of your components, you can import mixins to the style guide. Creating a .js file that exports the mixins or adding it directly to the styleguide.config.js file

Use mixins option to customize this behavior:

// mixin file
export default {
  data() {
    return {
      colorDemo: 'blue',
      sizeDemo: 'large'
    }
  }
  /* ... */
}

// example component

<Button size="colorDemo" color="sizeDemo">
  Lick Me
</Button>

If you need to load vue plugins from a third party. You can add it, creating a .js file that installs the plugins and then adds it into the styleguide.config.js file

Use require option:

// styleguide/global.requires.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VeeValidate from 'vee-validate'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(VueI18n)
Vue.use(VeeValidate)
Vue.use(Vuetify)

// styleguide.config.js
module.exports = {
  require: [path.join(__dirname, 'styleguide/global.requires.js')]
}

If you need to change the root component of each preview example, you can change the root component of preview. Creating a .js file that exports the root component as jsx component and then adds it into the styleguide.config.js file

Use renderRootJsx option:

// config/styleguide.root.js
import VueI18n from 'vue-i18n'
import messages from './i18n'

const i18n = new VueI18n({
  locale: 'en',
  messages
})

export default previewComponent => {
  // https://vuejs.org/v2/guide/render-function.html
  return {
    i18n,
    render(createElement) {
      // v-app to support vuetify plugin
      return createElement(
        'v-app',
        {
          props: {
            id: 'v-app'
          }
        },
        [createElement(Object.assign(previewComponent))]
      )
    }
  }
}

// styleguide.config.js
module.exports = {
  renderRootJsx: path.join(__dirname, 'config/styleguide.root.js')
}

See an example of style guide with vuetify and vue-i18n.

Extends support

If you import extends, for it to be documented you need to add in the header the mixin tag @mixin, for example

// src/extends/Base.vue

<template>
  <div>
    <h4>{{ color }}</h4>
    <!--the appropriate input should go here-->
  </div>
</template>
<script>
/**
 * @mixin
 */
export default {
  props: {
    /**
    * The color for the button example
    */
    colorExtends: {
      type: String,
      default: '#333'
    },
  },
}
</script>

// src/components/Button/Button.vue
<template>
<!-- -->
</template>
<script>
import Base from '../../extends/Base.vue';

export default {
  name: 'Button',
  extends: Base,
  props: {
    /**
    * The size of the button
    * `small, normal, large`
    */
    size: {
      default: 'normal'
    },
    /**
    * Add custom click actions.
    **/
    onCustomClick: {
      default: () => () => null,
    },
  },
  /* ... */
}
</script>

• Fixed: #116

• Updated: Updated with [email protected]

Breaking changes from react-styleguidist

Node.js 6 is the lowest supported version**

Styleguidist doesn’t support Node.js 4 anymore.

New format of template option**

We’re now using mini-html-webpack-plugin and @vxna/mini-html-webpack-template instead of html-webpack-plugin.

This will make things like adding a favicon or fonts from Google Fonts much easier.

If you’re using a custom HTML template, you need to update your style guide config.

// < 1.6.0v
module.exports = {
  template: './styleguie/template.html'
};

// 1.7.0v
module.exports = {
  template: {
    // This is just an example, there are many more available options
    favicon: 'https://assets-cdn.github.com/favicon.ico'
  }
};

See more in the docs.

Changed Node.js API**

server method now returns an object containing a webpack Compiler instance and the Styleguidist server, see examples in the docs.

New features

Webpack 4 support (#101 by @hgascoigne and with react-styleguidist merge)

Navigation

Fixed errors (by @viljamis) and added the isolate for each component, so both components and sections, already is separate.
Example:
http://rafaelescala.com/vue-styleguide-navigation/#!/Getting%20Started
Source

module.exports = {
  navigation: true
};

“Fork me” ribbon**

One more step to make by react-styleguidist usable for documenting open source projects:

New config option to enable the ribbon, define the URL and change the label:

module.exports = {
  ribbon: {
    url: 'http://example.com/',
    text: 'Fork me on GitHub'
  }
};

And two new theme variables to change colors: color.ribbonBackground and color.ribbonText

Styles support inside component documented**

Added support for the <style scoped> tag in the single file component format (#93 by @mrjones2014)
Available since v1.6.x
Example:

```vue
  <template>
    <div class="wrapper">
      <Button id="dog-name-button" @click.native="pushButton">Push Me</Button>
      <hr />
      <p class="text-name">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 {
      data() {
        return { numClicks: 0, dogName: dogNames[0] };
      },
      methods: {
        pushButton() {
          this.numClicks += 1;
          this.dogName = dogNames[this.numClicks];
        }
      }
    }
  </script>

  <style scoped>
    .wrapper {
      background: blue;
    }
    .text-name {
      color: red;
    }
  </style>
```

Bugfixes

• Fixes navigation and isolated mode when there’s whitespace in the name of section (#106 by @viljamis)
• Fixes scrolling in Safari (and a few other browsers) when using navigation: true (#99 by @viljamis)
• components option should accept arrays.
• Do not convert URLs in Markdown to auto links
• Improved accessibility