Vue-juri NPM | npm.io

vue-juri

Introduction

Vue-juri is a component for Vue.js that loads a list of Markdown files and uses slots to display the demos and usages elegantly.

The design is inspired by Ant Design! I like the elegant way to display a list of examples.

The name comes from Juri Yukawa in Kokkoku 💃

Install

yarn add vue-juri

CDN: UNPKG | jsDelivr (available as window.Juri)

Usage

<template>
  <juri :doc-list="docList"></juri>
</template>

<script>
import Juri from 'vue-juri'
import basic from 'raw-loader!./docs/basic.md'

export default {
  components: {
    Juri
  },
  data () {
    return {
      docList: [basic]
    }
  }
}
</script>

Guides

What are example docs

Example docs are a list of markdown files that contain the code blocks of the examples' usage. We render the code blocks in the usage part of the demo. For example:

<template>
  <star-rate :value="4"/>
</template>

<script>
import StarRate from 'vue-cute-rate'

export default {
  components: {
    StarRate
  }
}
</script>

Set the examples' custom title and description

You can use following marks in each example markdown file to set custom title and description of it.

---
title: Basic 
desc: The simplest usage.
---

Where to set the docs

The docs were set to a docs directory, and the path of the directory was ./docs/ relatived to .vue file by default.

How to import the markdown files

You need to use raw-loader to import files as a string.

You can use the loader via webpack config or inline. View raw-loader for more details.

via webpack config

webpack.config.js

module.exports = {
 module: {
   rules: [
     {
       test: /\.md/,
       use: 'raw-loader'
     }
   ]
 }
}

In your application

import file from './docs/basic.md'

Inline

In your application

import file from 'raw-loader!./docs/basic.md'

Props

Property	Description	type	Default
doc-list	Array of the example markdown files.	array	[]
expand-all	Whether to expand all usages.	boolean	false
highlight	Whether to highlight code blocks, you can supply a function to customize this, use prismjs to highlight code by default.	boolean / function	true
big-demo	Display as a big demo-box which not contains left and right columns.	boolean	false

Slot

The live demo which you want to display, make sure to use demo-${index} as the slot name, index is the order of the markdown file in doc-list.

Here is a simple example:

<template>
  <div id="app">
    <juri :doc-list="docList">
      <star-rate slot="demo-0" :value="4"/>
    </juri>
  </div>
</template>

<script>
import Juri from 'vue-juri'
import basic from 'raw-loader!./docs/basic.md'
import StarRate from 'vue-cute-rate'

export default {
  components: {
    Juri,
    StarRate
  },
  data () {
    return {
      docList: [basic]
    }
  }
}
</script>