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

Question

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>

when app mounted, means all views are rendered. Insert it at head or import it at main.js — 王仁宏
– 王仁宏, Commented Jan 25, 2021 at 2:28

Joe · Accepted Answer · 2021-01-25 02:37:31Z

3

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 npm - npm i marked, then import marked from 'marked' - why not do it this way?

answered Jan 25, 2021 at 2:37

Joe

9681 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related