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

Question

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'

...

This looks like an Angular library and I expect that you will have issues combining it with Vue because Angular and Vue will both be fighting over the template. — Bert
– Bert, Commented Jun 7, 2017 at 14:47
@BertEvans I tell Vue to ignore the template that pertains to the angular bit Vue.config.ignoredElements = ['plasmid', 'plasmidtrack', 'trackscale', 'trackmarker', 'tracklabel', 'markerlabel' ] — asselinpaul
– asselinpaul, Commented Jun 7, 2017 at 15:50
Sure, but since this is a component, that HTML potentially doesn't exist on the page when Angular is initialized. — Bert
– Bert, Commented Jun 7, 2017 at 15:51
@BertEvans I don't know if I use Angular or just the visualisation code (from here: angularplasmid.vixis.com/usage-basic.php) since the angular portion of the code (manipulating the fields in the dom) is performed by vue.js. There is an example in the first answer's comment on how it works using a differently structured Vue.js program. — asselinpaul
– asselinpaul, Commented Jun 7, 2017 at 15:57
With a single file component (or any component) in Vue, the template is not rendered to the page immediately, it happens after the page is loaded. In your pre-componentized example, whatever your imported script does, the HTML is available on page load. However, with the component, the HTML is not available until after page load, and I doubt your imported script is monitoring changes to the page to know when it needs to render the chart. So you will need something to initialize the imported script after the component has rendered. — Bert
– Bert, Commented Jun 7, 2017 at 16:03

asselinpaul · Accepted Answer · 2017-06-07 16:08:53Z

2

Solved by requiring the file when my component is mounted:

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

answered Jun 7, 2017 at 16:08

asselinpaul

3861 gold badge6 silver badges20 bronze badges

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

2 Comments

Bert Over a year ago

I'm glad this worked, but I wonder if there will be problems when/if the component is re-rendered (if it ever is).

asselinpaul Over a year ago

interesting, at the moment it isn't but I see why it might fail.

FitzFish · Accepted Answer · 2017-06-07 15:01:01Z

0

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.

edited Jun 7, 2017 at 15:01

answered Jun 7, 2017 at 14:55

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

2 Comments

asselinpaul Over a year ago

it works here (my previous non single-file-component attempt): dna.now.sh for which the code is here: github.com/asselinpaul/dnaviewer/blob/master/app/index.html

asselinpaul Over a year ago

I think the problem is that the AngularPlasmid code is looking for the <plasmid> tag before Vue.js has populated the view.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related