'Importing external js library in Vue.js Single File Component

I have the following Single File Component in Vue.js.

The plasmid tag is meant to get rendered by the angularplasmid.complete.min.js file but isn't for some reason. Is this the correct way to import a library in a component?

I am restructuring an old Vue project to be better designed but I know that the plasmid tag renders on here (which doesn't use single file components): https://github.com/asselinpaul/dnaviewer/blob/master/app/index.html

Any help much appreciated.

<template>
<div id="DNA Plasmid">
    <h3>Plasmid Visualisation</h3>
    <div class="section">
        <plasmid id='p1' plasmidheight="800" plasmidwidth="800" v-bind:sequencelength="sequenceLength">
            <plasmidtrack id='t1' radius="200" width="55">
                <trackmarker v-for="(bound, index) in bounds" class='marker' v-bind:start="bound.start" v-bind:end="bound.end" v-bind:style="{ fill: bound.color }" v-bind:key="bound.start">
                    <markerlabel v-bind:text="bound.name" v-bind:vadjust='bound.vadjust' style='font-size:12px'></markerlabel>
                </trackmarker>
                <tracklabel v-bind:text="name" style='font-size:25px;font-weight:bold'></tracklabel>
            </plasmidtrack>
        </plasmid>
    </div>
</div>

</template>

<script>
import './angularplasmid.complete.min.js'

...
vue.jsvuejs2vue-component


Solution 1:[1]

Solved by requiring the file when my component is mounted:

mounted: function(){
    require('./angularplasmid.complete.min.js')
  }

Solution 2:[2]

You definitely can't reasonably combine angular functions with Vue. Plus, angular use its own dependency system.

Beside, you can use import in a single-file component exactly the same way than in any script. But of course be sure that your imported script is actually exporting something (or is relevant to execute as a module, which is probably not the case here).

Here is a reminder of the syntax:

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Note that the commonJS require() and module.exports are also perfectly fine in a single-file component.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 asselinpaul
Solution 2

Related Questions