How do I use template variables?

[ddahan]

How do you allow VueShowndown to interpret template variables on the fly?

For example, with this single file component:

<template>
      <div>
        <VueShowdown class="prose" :markdown="content" :vueTemplate="true" />
      </div>
</template>

<script>
import { Urls } from '../consts/urls.consts';

export default {
  data() {
    return {
      content: 'Write some `Markdown` here :kissing:',
      myDynamicUrl: Urls.apiHost,
    };
  },
};
</script>

How can I process so that text like {{myDynamicUrl}} is rendered by VueShowdown?

[meteorlxy]

The vueTemplate support is quite minimal now, so I have to say you can't use it as that.

But it's possible to support it. What about usage like this:

<template>
  <div>
    <VueShowdown class="prose" :markdown="content" :vue-template="true" :vue-template-data="{ myDynamicUrl }" />
  </div>
</template>

<script>
import { Urls } from '../consts/urls.consts';

export default {
  data() {
    return {
      content: 'Write some `Markdown` here :kissing:',
      myDynamicUrl: Urls.apiHost,
    };
  },
};
</script>

[ddahan]

I have a similar issue:

before using img

after using img

(simplified) component:

<template>
    <VueShowdown
      class="prose"
      :markdown="content"
      :vueTemplate="true"
      :vueTemplateData="{ blogUrl }"
    />
</template>

<script>
import { Urls } from '../consts/urls.consts';

export default {
  data() {
    return {
      blogUrl: Urls.blog,
      content: 'Write some `Markdown` here :kissing:',
    };
  },
};
</script>

[meteorlxy]

You'd better check the console for what's the error, or check the DOM structure for what is rendered

[meteorlxy]

Ah damn. What I wrote is not valid markdown syntax too.

Try this instead:

<img :src="publicBlogUrl + '/discounts.jpeg'">

[meteorlxy]

Anyway, although vue template syntax is somehow compatible with markdown, it still have some limitations. We have similar mechanism in vuepress, you may have interests about it (if you don't know the vuepress project yet)

[ddahan]

Indeed I noticed some interaction issues because of some Django code that uses the same {{
I deactivated the option when it's not required. Thanks again for your help and the quality of your tool ;)