How to preserve newlines in VueJS when importing text from raw-loader and formatted using showdown

Question

I am working on a website to show basic information about a sport. I have the (small) rulebook saved as rulebook.md . My project is using webpack and the latest vue-cli and yarn.

To import the rulebook I use raw-loader and pass the content to a Vue component called markdown that takes markdown and formats it with the showdown module.

@/components/Markdown.vue

<template>
  <div id="markdown">
    {{ source }}
    {{ converted }}
  </div>
</template>

<script>
import * as showdown from 'showdown'
const converter = new showdown.Converter()
converter.setOption('simpleLineBreaks', true)

export default {
  name: 'markdown',
  props: ['source'],
  data () {
    return {
      converted: converter.makeHtml(this.source)
    }
  }
}
</script>

<style lang="scss" scoped>
.markdown {
  white-space: pre-line;
  word-wrap: break-word;
}
</style>

@/views/punchies/Rulebook.vue

<template>
  <div id="punchies-rulebook" class="container">
    ...
    <markdown ... :source="source"></markdown>
  </div>
</template>

<script>
import Markdown from '@/components/Markdown.vue'
// eslint-disable-next-line
import source from 'raw-loader!@/views/punchies/misc/rulebook.md'

export default {
  name: 'rulebook',
  components: {
    'markdown': Markdown
  },
  data () {
    return {
      source
    }
  }
}
</script>

...

I have tried to set showdown to use line breaks and to tell CSS to render line breaks. Simply doing console.log(source) shows the rulebook without any line breaks in it. Upon searching this issue, the raw-loader github showed an issue where it is explained that raw-loader does preserve newlines.

Answer 1

In Markdown.vue

<template>
    <p>{{source}}</p>
    <p v-html="converted"></p>
</template>