How to create global vue variables in html and make it readable on .md files?

[lucassimines]

How can I make my markdown files to get my Vue variables that I registered in my .html file?

I don't want to register the script inside .md files, is it possible to register in .html?

<script>
 new Vue({
 el: '#main',
 data: {
 appName: '<b>' + $docsify.name + '</b>',
 fullImg: '<b>1.920 x 1.080 px</b>. Formato: <b>.jpg</b> com <b>72 dpi</b>',
 mobileImg: '<b>1.080 x 1.920 px</b>. Formato: <b>.jpg</b> com <b>72 dpi</b>',
 squareImg: '<b>1.200 x 1.200 px</b>. Formato: <b>jpg</b> com <b>72 dpi</b>'
 }
 })
</script>

[jhildenbiddle]

Addressed in #1271. Waiting on review and merge. Keep an eye on #752 as well.

[jhildenbiddle]

@fmcdigital --

Fixed in #1271. Note that if you intent to use raw HTML as data, you will need to use the v-html directive:

# Text Data

## {{ appName }}

- {{ fullImg }}
- {{ mobileImg }}
- {{ squareImg }}

<script>
 new Vue({
 el: '#main',
 data: {
 appName: $docsify.name,
 fullImg: '1.920 x 1.080 px. Formato: .jpg com 72 dpi',
 mobileImg: '1.080 x 1.920 px. Formato: .jpg com 72 dpi',
 squareImg: '1.200 x 1.200 px. Formato: jpg com 72 dpi'
 }
 })
</script>

# Raw HTML DAta

## <span v-html="appName"></span>

- <span v-html="fullImg"></span>
- <span v-html="mobileImg"></span>
- <span v-html="squareImg"></span>

<script>
 new Vue({
 el: '#main',
 data: {
 appName: '<b>' + $docsify.name + '</b>',
 fullImg: '<b>1.920 x 1.080 px</b>. Formato: <b>.jpg</b> com <b>72 dpi</b>',
 mobileImg: '<b>1.080 x 1.920 px</b>. Formato: <b>.jpg</b> com <b>72 dpi</b>',
 squareImg: '<b>1.200 x 1.200 px</b>. Formato: <b>jpg</b> com <b>72 dpi</b>'
 }
 })
</script>