vue-juri
Version:
A component for Vue.js to display the demo and usage elegantly.
172 lines (122 loc) • 3.82 kB
Markdown
# vue-juri
[](https://npmjs.com/package/vue-juri) [](https://npmjs.com/package/vue-juri) [](https://circleci.com/gh/luyilin/vue-juri/tree/master)
[DEMO](https://vue-juri.netlify.com/)
## 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](https://ant.design/components/rate/)! I like the elegant way to display a list of examples.
The name comes from Juri Yukawa in *Kokkoku* 💃
## Install
```bash
yarn add vue-juri
```
CDN: [UNPKG](https://unpkg.com/vue-juri/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-juri/) (available as `window.Juri`)
## Usage
```vue
<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](https://github.com/webpack-contrib/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:
```vue
<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>
```
## Author
vue-juri © [luyilin](https://github.com/luyilin), released under the MIT License.
> [minemine.cc](https://minemine.cc) · GitHub [@luyilin](https://github.com/luyilin) · Twitter [@luyilin12](https://twitter.com/luyilin12)