How to use JBrowse when use the framework -- vue and webpack.

[linjiahao962889027]

Now I use the vue and webpack construct a web which need to embed JBrowse. When I use the methed form https://www.jbrowse.org/docs/embedding.html to construct my project, I failed. I found the JavaSript dose't runing. I don't know how to import the JBrowse into my project. And I use vue-cli to construct my project. I hope I can get your help. This is my code.

<template>
<!-- This is  vue Template -->
  <div id="app">
        <div class="col-12" style="heght:500px;" id="GenomeBrowser">
          <div id="LoadingScreen" style="padding: 50px;">
            <h1>Loading...</h1>
          </div>
      </div>
  </div>
</template>

<script
    type="text/javascript"
    src="./dist/browser.bundle.js"
    charset="utf-8"
></script>
<script>
    var features = [];
    // Add some features
    var config = {
        containerID: "GenomeBrowser",
        baseUrl: "../jbrowse/",
        refSeqs: {
            url:
                "/Danshen/jbrowse/data/volvox.fa.fai",
        },
        tracks: [
            {
                key: "genes",
                label: "genes",
                urlTemplate:"/Danshen/jbrowse/data/volvox.sorted.gff3.gz",
    storeClass:"JBrowse/Store/SeqFeature/GFF3Tabix",
    type:"CanvasFeatures"
            },
            {
                key: "alignments",
                label: "alignments",
    urlTemplate:"/Danshen/jbrowse/data/volvox-sorted.bam",
                storeClass: "JBrowse/Store/SeqFeature/BAM",
                type: "Alignments",
            },
        ],
    };

    // Add to the config or tracks

    // Instantiate JBrowse
    window.addEventListener("load", () => {
        window.JBrowse = new window.Browser(config);
    });
</script>

<script>
//This is vue js frame
import $ from 'jquery'

$(function () {
  $('[data-toggle="popover"]').popover()
})

export default {

[cmdcolin]

This was a sample app that I made to demo jbrowse 1 in a react app

https://github.com/cmdcolin/jbrowse_in_react_app

It is not perfect or ideal. There are lots of things about jbrowse that make it not perfectly suited to embedding like this, but it is a best attempt.

JBrowse 2 is currently under development, and will fit hopefully better into being embedded as a reactive component.

[cmdcolin]

let us know if anything else is needed...welcome PRs to improve example documentation or fixes too, we are focusing mostly on jbrowse 2 now which is better at being componentized