Converting index.html into a vue component

Question

I'm building a webpage using Vue.js, and I'm relatively new to Javascript. I'm using Vue because I find the way it uses component.vue files makes it easier to program in Javascript.

However, looking at GitHub to help with libraries, code, etc. makes it hard, since they are usually written as one.html page.

I found a library that I'd like to use, but I'm not sure how I would create a Vue component out of it. This is because it isn't really returning anything. I'm not sure how to export default{} the stuff so that I'm able to use it in my App.vue.

Furthermore, the HTML and the script are kinda integrated so I was wondering would this change how I implement it?

Here is the index.html:

 $(document).ready(function() { var map = new FlightsMap("schedules_map", { width: 960, height: 440, stations: "stations.json", flights: "flights.json" }); $("#reset").click(function() { map.reset(); }); $("#zoom_in").click(function() { map.zoomIn(); }); $("#zoom_out").click(function() { map.zoomOut(); }); $("#show_schedules").click(function() { map.showSchedules(); }); });

 #station_name { display: inline-block; float: right; } a { cursor: pointer; }

 <script src="https://cdn.rawgit.com/santiagohecar/flights-map/master/dist/flights-map.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="schedules_map"></div> <div style="width:800px;"> <a id="reset" href="javascript:void(0)">Reset</a> <a id="zoom_in" href="javascript:void(0)">Zoom in</a> <a id="zoom_out" href="javascript:void(0)">Zoom out</a> <a id="show_schedules" href="javascript:void(0)">all</a> <div id="station_name" ></div> </div>

From here

Answer 1

Sorry it took so long to respond. This should work for you:

Map.vue - this is a Vue component

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

    <div style="width:800px;">
      <a @click="map.reset()" href="#">Reset</a>
      <a @click="map.zoomIn()" href="#">Zoom in</a>
      <a @click="map.zoomOut()" href="#">Zoom out</a>
      <a @click="map.showSchedules()" href="#">All</a>
      <div id="station_name"></div>
    </div>
  </div>
</template>



<script>
import FlightsMap from "../../node_modules/flights-map/src/flights-map";

export default {
  name: "Map",
  props: ["flights", "stations"],
  data() {
    return {
      map: {}
    };
  },
  watch: {
    flights() {
      this.createMap();
    },
    stations() {
      this.createMap();
    }
  },
  methods: {
    createMap() {
      this.map = new FlightsMap("schedules_map", {
        width: 960,
        height: 440,
        stations: this.stations,
        flights: this.flights
      });
    }
  },
  mounted() {
    this.createMap();
  }
};
</script>

<style scoped>
#station_name {
  display: inline-block;
  float: right;
}
a {
  cursor: pointer;
  margin: 1rem;
}
</style>

Installation

You'll need to install flights-map with npm, or reference it from some local source. flights-map isn't a npm package, so you will have to install it directly from GitHub:

npm install https://github.com/hrcarsan/flights-map.git

Depending on where you locate your component, you will need to change the path to flights-map accordingly. When I was testing it, I had this file structure:

node_modules/
 ┗ flights-map/
    ┣ src/
    ┗ ┗ flights-map.js
src/
 ┗ components/
    ┗ Map.vue
 ┣ main.js
 ┗ App.vue

So you need to go two levels up from Map.vue to get above node_modules and src , then down to flights_map/src/flights-map.js Also note that there is a dist/ directory in flights-map/ , with a different flights-map.js , but that one doesn't work properly. So make sure that your path goes to the src directory, not dist

Using Map.vue

App.vue

<template>
  <Map
    stations="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/stations.json"
    flights="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/flights.json"
  ></Map>
</template>

<script>
import Map from "@/components/Map.vue";

export default {
  name: "App",
  components: {
    Map
  }
};
</script>

Whenever you want use the Map component, just call it like so (note that you need to import it on each seperate view you use it on):

<Map
    stations="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/stations.json"
    flights="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/flights.json"
></Map>

stations is the url of stations.json .

flights is the url of flights.json

Sidenote :

The watchers in Map.vue aren't required, they are there just to make the map reactive. You can remove them and the createMap() method too. Just put the contents of createMap() in mounted()

---

Well, I hope that this helps you. Feel free to ask me if you have any other questions.