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>