CODEWITHSUNDEEP
vue.jsvuejs2vue-component
asselinpaul
asselinpaul

Reputation: 386

Importing external Angular.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'

...

Upvotes: 5

Views: 10853

Answers (2)

asselinpaul
asselinpaul

Reputation: 386

Solved by requiring the file when my component is mounted:

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

Upvotes: 2

FitzFish
FitzFish

Reputation: 8629

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.

Upvotes: 0

Related Questions