variable still not defined even after adding external JS in VUE component

I am trying to import function marked from https://cdn.jsdelivr.net/npm/marked/marked.min.js. I have injected <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> by mount(). But it always throws an error [Vue warn]: Error in render: "ReferenceError: marked is not defined". Why it is not defined even after the script has been added?

<script>
export default {
  name: 'Upload',
  data () {
    return {
      title: '',
      content: ''
    }
  },
  mounted () {
    let externalScript = document.createElement('script')
    externalScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/marked/marked.min.js')
    Plugin.async = true
    document.head.appendChild(externalScript)
  },
  computed: {
    markdown2html: function () {
      return marked(this.content)
    }
  }
}
</script>

41 thoughts on “variable still not defined even after adding external JS in VUE component”

  1. Okay I’m not familiar with Vue, I use React, but normally I would be able to add the script link in the index.html under public folder. Then when everything’s built it will be there.

    Best option I think would be to install it via npmnpm i marked, then import marked from 'marked' – why not do it this way?

    Reply

Leave a Comment