I learned how to combine markdown and Vue markup together into my storybooking module nuxt-stories. You can check it out here! The same markdown component can easily be reused anywhere in the Nuxt app. This means your stories or your vue templates can be written like this:
<markdown>
* Here is story 1
* Here is story 2
* This is the logo component:
<logo></logo>
A table would be here:
| Header 1 | Header 2 |
| --- | --- |
| Data1 | Data 2 |
</markdown>
The markdown will be compiled into beautiful mark*up*. And the <logo> will be a fully functioning Vue component! The markdown renderer is extensible and in my demo, you'll see the bootstrap table-striped being used, but never in my template do I have to write class="table table-striped". So, this makes it far easier now to write notes, gameplans, stories, whatever!
Only caveat: while it can be re-used in a Nuxt app, since the HTML is being re-compiled, Vue will complain that "server-side rendering doesn't match...". That just means <markdown> needs to be wrapped in a <client-only> tag.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I learned how to combine markdown and Vue markup together into my storybooking module nuxt-stories. You can check it out here! The same markdown component can easily be reused anywhere in the Nuxt app. This means your stories or your vue templates can be written like this:
The markdown will be compiled into beautiful mark*up*. And the
<logo>will be a fully functioning Vue component! The markdown renderer is extensible and in my demo, you'll see the bootstraptable-stripedbeing used, but never in my template do I have to writeclass="table table-striped". So, this makes it far easier now to write notes, gameplans, stories, whatever!Only caveat: while it can be re-used in a Nuxt app, since the HTML is being re-compiled, Vue will complain that "server-side rendering doesn't match...". That just means
<markdown>needs to be wrapped in a<client-only>tag.