A library for documenting Vue components

Overview

Elucidate

npm version

A library that makes it a breeze to "shed light" on your Vue component.

Demo: https://mattrothenberg.github.io/vue-elucidate-example

Demo Video: https://streamable.com/eir1u

Installation (Yarn)

yarn add vue-elucidate

Installation (in a Vue project)

import Elucidate from 'vue-elucidate'
Vue.use(Elucidate)

Usage

<elucidate :component="button" :example="example"></elucidate>

The <elucidate> component takes two props, component and example.

The former is, quite literally, a single Vue component (either imported into your current app, or defined inline), or an array of Vue components.

The latter is either a single example object shaped thusly, or an array of example objects shaped thusly:

Key Value
markup An HTML code snippet that you would like to document
props An object defining the props referenced by your HTML code snippet
methods An object defining the methods referenced by your HTML code snippet
name (OPTIONAL) A display name for the given component if part of an array of examples

How does it work?

Let's assume you have a component named custom-button. It's defined in custom-button.vue thusly:

<template>
  <button :class="classList">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    name: 'custom-button',
    props: {
      variant: {
        type: String,
        default: 'primary'
      },
      size: {
        type: String,
        default: 'medium'
      }
    },
    computed: {
      classList () {
        return `btn-${this.variant} btn-${this.size}`
      }
    }
  }
</script>

<style>
  .btn-primary {
    background: blue;
    color: white;
  }

  .btn-small {
    font-size: 12px;
  }
</style>

Elucidate works by:

  • Rendering an example code snippet, e.g., <custom-button size="small">Hello</custom-button>
  • Documenting that snippet, as well as any props/functions that were passed to it
  • Documenting all of the props exposed by <custom-button>, in this case variant and size.

So, the following code:

<elucidate :component="button" :example="example"></elucidate>
import CustomButton from '@/components/CustomButton'
import '@/darcula.css'

export default {
  data () {
    return {
      button: CustomButton,
      example: {
        markup: `<custom-button size="small">Hello</custom-button>`
      }
    }
  }
}

...would produce the following result:

Sample Screenshot

Customization

Elucidate is very customizable. I've included some light CSS here and there to make things look half-way decent. Here are a few guidelines for customization.

BYOCSS

Elucidate uses Prism JS for syntax highlighting. Elucidate doesn't ship out-of-the-box with a particular syntax highlighting theme, so feel free to pick one from Prism Themes

Default CSS

Include Elucidate's default styles by including the following line of code in your project:

import 'vue-elucidate/dist/style.css'

Elucidate maintains a light footprint, and affords you the following classes for purposes of customization:

.elucidate-example-picker {}

.elucidate-example-picker label {}

.elucidate-select {}

.elucidate-select select {}

.elucidate-select::after {}

@supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) {
  .elucidate-select::after {
  }

  .elucidate-select select {}

  .elucidate-select select:focus {}
}

.elucidate-preview {}

.elucidate-tabs {}

.elucidate-tabs .nav-tabs {}

.elucidate-tabs .tab {}

.elucidate-tabs .tab:hover {}

.elucidate-tabs .tab.active {}

.elucidate-tabs .tab:not(:last-of-type) {}

.elucidate-tabs .tab a {}

.elucidate-table-wrap {}

.elucidate-table {}

.elucidate-table th {}

.elucidate-table td {}

To-Do

  • Test Coverage
  • Accommodate multiple components in a single example
  • Accommodate multiple examples
  • Investigate slot-based API for further customization of sub-components
You might also like...
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

Over 90 Bootstrap based Vue.js components and directives. CoreUI React.js UI Components. CoreUI for Vue.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true Vue components, without jQuery and unneeded dependencies. 🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

🗺 Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

 MADE Vue - A library of Vue 3 UI Components
MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

N3-components , Powerful Vue UI Library.
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

A small components library to use Rough.js in Vue.

vue-rough A small components library to use Rough.js in Vue. Examples https://vue-rough.neustadt.dev Installation $ npm install vue-rough import VueR

Vue 3 + TypeScript + TailwindCss Components Library UI

How To npm install tailpieces or yarn add tailpieces Add tailpieces to purge Road Map Add tests to project Add translations to classes and components

Qiskit components library for Vue.

Qiskit components library for Vue.

Components library for VUE used by the Ebury online team

Components library for VUE used by the Ebury online team

A small components library to use Rough.js in Vue.

A small components library to use Rough.js in Vue.

a library of vue components used by mapping applications
a library of vue components used by mapping applications

phila-vue-mapping (@phila/vue-mapping in npmjs.com) phila-vue-mapping is a library of Vue components that can be used in mapping apps which use Vue.js

AnyUI - A cute UI components library for Vue 3
AnyUI - A cute UI components library for Vue 3

AnyUI This is a cute UI components library for Vue 3. IMPORTANT: This project is still working in progress. How to use Step 1: Install the @any-design

Engage Vue Client Components Library

Engage Vue Components Library This library provide prebuilt components in Vue.js for building Engage products Installation npm install engage-vue-comp

Library of shared components to be re-used in Vue.js

Library of shared components to be re-used in Vue.js Storybook There's a CI/CD integration running using vercel.com @ https://ripe-components-vue-now.

Components library (Vue js version 3)

vue_3_example Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build L

Syncfusion Vue UI Components Library

Syncfusion Vue UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 50+ UI components that every applications will ever need.

Vue components with SVG icons of the Entypo library

Vue components with SVG icons of the Entypo library

Comments
  • Enhancement request. Is ti possible to add a description column to the props table and a search?

    Enhancement request. Is ti possible to add a description column to the props table and a search?

    Hi, I was looking for a vue automatic documentation, and this vue-elucidate is really what I need, thank you for doing this. But, I found 2 "issue" witch is the need at least on my project to have a description column on the props table also a search would be nice for component with lots of props. Since I don't know if there is a place where to ask for a possible request I did wrote it here, forgive me if the wrong place. Thank you.

    opened by Dragod 1
Releases(v0.12.0)
  • v0.12.0(Oct 16, 2017)

    • Supports documenting multiple components, in case you have an example that looks something like this:
    <ui-tabs>
      <ui-tab title="Settings">...</ui-tab>
      <ui-tab title="Preferences">...</ui-tab>
    </ui-tabs>
    
    Source code(tar.gz)
    Source code(zip)
:sparkles: Markdown files to ALIVE Vue components.

vue-md-loader Introduction Webpack loader for converting Markdown files to ALIVE Vue components. Configurable Markdown-It parser. Built-in syntax high

wxsm 111 Nov 20, 2022
Custom story blocks for Vue single file components

vue-storybook Custom <story> blocks for Vue single file components that work out of the box with Vue CLI 3 and vue-cli-plugin-storybook. yarn add vue-

Matt Rothenberg 151 Aug 3, 2022
📇 Convert Markdown file to Vue component.

You have other better choices https://github.com/egoist/vmark https://github.com/liril-net/ware-loader vue-markdown-loader Convert Markdown file to Vu

cinwell.li 703 Nov 30, 2022
React inspired style guide generator for Vue.js

?? [20/09/2017] Project discontinued ?? For purpose of having a demo of your Vuejs components please take a look at following projects that do really

Mikhail Kuznetcov 123 Jul 30, 2020
A simple plugin for jsdoc (`pase vue SFC info to description`)

jsdoc-vue-component A simple plugin for jsdoc (pase vue SFC info to description by AST analysis). Maybe you will try jsdoc-vuedoc, and you have a bett

Season Chen 11 May 7, 2022
🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

vuese One-stop solution for vue component documentation This project is supported by our Backers Document For detailed documentation: vuese.org Overvi

vuese 1.6k Nov 29, 2022
Easily build beautiful tutorials with Vue

VueTut Easily build beautiful tutorials with Vue. ?? ⠀Docs ?? ⠀Tutorial/Demo Install npm i vue-tut Setup import VueTut from 'vue-tut'; import 'vue-tut

Electron Vue Window Toolkit 44 Jul 10, 2022
Generate a JSON documentation for a SFC Vue component. Contribute: https://gitlab.com/vuedoc/parser#contribute

The Vuedoc Parser Generate a JSON documentation for a Vue file component. Table of Contents Install Features Options Usage Syntax Add component name A

null 86 Nov 15, 2022
A webpack loader for markdown file transform to vue file.

vue-dotmd-loader A webpack loader for loader markdown file transform to vue file. 中文 Features: Support to import Vue file components and render them i

蓝月萧枫 10 May 18, 2022
Vue's template compiler reimplemented in Rust!

Vue Compiler in Rust Try it out in the wasm playground! Evan says: Maybe in the long run we want the whole transform (and even the Vue compiler!) to b

Herrington Darkholme 666 Nov 21, 2022