Editing Living Documentation

Viljami Salminen edited this page Sep 28, 2018 · 4 revisions

System’s components are documented based on the comments in your source code and readme files that live inside /docs/. Each Element, Pattern and Template can also include a custom block called <docs/>, which is used to provide an example of the markup. Like this:

<docs>
  ```jsx
  <wrapper>I’m an example that will be shown in docs.</wrapper>
  ```
</docs>

In addition, you can include JSDoc style comment blocks inside your <script/> which will be shown in the documentation. An example:

<script>
  /**
   * A wrapper element is used to wrap elements and patterns.
   */
  export default {
    name: "Wrapper",
    status: "prototype",
    version: "1.0.0",
    props: {
      /**
       * The html element name used for the wrapper.
       */
      type: {
        type: String,
        default: "div"
      }
    }
  }
</script>

Finally, the wrapper Element with all the documentation added:

<template>
  <component :is="type" class="wrapper">
    <slot/>
  </component>
</template>

<script>
  /**
   * A wrapper element is used to wrap elements and patterns.
   */
  export default {
    name: "Wrapper",
    status: "prototype",
    version: "1.0.0",
    props: {
      /**
       * The html element name used for the wrapper.
       */
      type: {
        type: String,
        default: "div"
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    @include reset;
    @include inset-space($space-large);
    width: 100%;
  }
</style>

<docs>
  ```jsx
  <wrapper>I’m an example that will be shown in docs.</wrapper>
  ```
</docs>

To learn more about the documentation format and what you can do with it, Please refer to Vue Styleguidist’s official docs on GitHub.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.