How to insert external javascript into a Vue component

Question

I am trying to insert a custom JavaScript (a sketcher) into a Vue component but no luck so far. When I try inserting javascript directly into a template like this:

<template>
    <div id="sketcher">
        var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300);
    </div>
</template>

I get an error: "Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed." My another attempt is to create a component in a different .js file and import it into a Vue component.

sketcher.js:

export default ({
  mounted(){    
   return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
})

Home.vue

<template>
    <div id="sketcher">
       <app-sketcher></app-sketcher>
    </div>
</template>

<script>
import sketcher from './sketcher';    
export default {
    components: {
    "app-sketcher": sketcher
    }
}
</script>

but I get this error: "Failed to mount component: template or render function not defined". I would highly appreciate any suggestions on how to fix this or to propose other options of embedding javascript into a Vue component.

thanksd · Accepted Answer · 2017-10-26 20:32:43Z

1

Your first error message is self-explanatory: you cannot put a <script> tag in the <template> of a single-file Vue component.

In your second example, you aren't defining a template for the app-sketcher component when you register it in your Home.vue file. Your sketcher.js file exports just the definition for a mounted hook and nothing else.

You can make a Sketcher.vue file:

<template>
  <div id="sketcher"></div>
</template>

<script>
export default {
  mounted() {    
    return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
}
</script>

And then use import it and use it in your Home.vue file like so:

<template>
  <app-sketcher/>
</template>

<script>
import AppSketcher from './Sketcher';    
export default {
  components: { AppSketcher }
}
</script>

edited Oct 26, 2017 at 20:32

answered Oct 26, 2017 at 20:18

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

4 Comments

chemist Over a year ago

Thank you for your help but I get this error after implementing your suggestions: [Vue warn]: Error in mounted hook: "TypeError: c is undefined" found in ---> <AppSketcher> at src/components/Sketcher.vue <Home> at src/components/Home.vue <VApp> <App> at src/App.vue <Root>

thanksd Over a year ago

You shouldn't be getting that error. Does your Sketcher.vue file look exactly like my example? If not, you probably have a syntax error somewhere in that file's mounted hook

chemist Over a year ago

I found my mistake and besides a missing '.vue' in import line, your code is working great. Thanks a lot.

chemist Over a year ago

The sketcher is displayed on the page but unfortunately it is mounted to the bottom of the page. After inspection I found that the sketcher was inserted below <script src="./dist/build.js"></script>. Any ideas why this can happen?

Collectives™ on Stack Overflow

How to insert external javascript into a Vue component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related