Vue-styleguidist: Example in .vue file

[andreydos]

As I see main advantage of additional .md file is the possibility to show an example. In .vue component above "export default" we can use JSDoc syntax with some markdown. So we can describe anything inside .vue file except example(I try it). I think the possibility to write an example in .vue file will be cool.

[rafaesc]

I had not thought about it. Can you write an example?

[leemason]

something using the vue loader would be cool:

https://vue-loader.vuejs.org/en/configurations/custom-blocks.html

this describes writting documentation, but could be used as an block.

[leemason]

To elabourate, your .vue files could look like this:

<template>
// html 
</template>

<script>
export default {}
</script>

<styles lang="scss" scoped>
.selector {}
</styles>

<examples>
In here is your documentation, plus examples. written in markdown.
</examples>

[rafaesc]

It is a good idea. It should be possible to integrate seamlessly.

This is where I extract the examples.
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/loaders/vuedoc-loader.js#L55
There should be a condition if the "componentInfo.tags.examples" does not exist then validate if the <docs></docs> tag exists.

Then when you pass the example-loader
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/loaders/vuedoc-loader.js#L58

you should validate if it is a .vue file, if it is, you should extract the source from the <docs></docs> tag and let it go through the normal flow. In this section.
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/loaders/examples-loader.js#L31

With vue-template-compiler, you should be able to extract a docs section.
Like this example.
https://github.com/vue-styleguidist/vue-docgen-api/blob/master/src/utils/parser.js

If anyone is encouraged to do so please let me know, I will try to do this this week.

[leemason]

Sounds great, unfortunatley i dont have the time myself to submit a pull request.

however thinking about it, it may be better to name the new tag <styleguide></styleguide>.

As people may already be using a <docs></docs> tag as per the vue loader examples. and it should prevent any conflicts.

[rafaesc]

Perfect, I already added this functionality.

You can also add the custom block <docs></docs> inside *.vue files, so that styleguidist builds the readme. You can review the following example

As the custom block <docs></docs> serves to add a markdown for the component, I did not see relevant rename the block, because vue-styleguidist serves the same purpose.

Upgrade to version 1.2.5