DEV Community

loading...

Discussion on: Jan. 24, 2020: What did you learn this week?

Collapse
richardeschloss profile image
Richard Schloss

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.