WP Vue Main

main.js

import "@babel/polyfill";

import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
import VTooltip from "v-tooltip";

import router from "@/router";
import store from "@/store";

import Search from "@/Search.vue";
import SearchAutocomplete from "@/SearchAutocomplete.vue";

import "@/scss/main.scss";

/**
 * Dynamic loader that will look for registered Vue mounting points
 * and mount different Vue components
 */
function ready(fn) {
  if (
    document.attachEvent
      ? document.readyState === "complete"
      : document.readyState !== "loading"
  ) {
    fn();
  } else {
    document.addEventListener("DOMContentLoaded", fn);
  }
}

const components = {
  "#vue-search": Search,
  "#vue-search-autocomplete": SearchAutocomplete,
};

Vue.use(VTooltip);

Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyCACL8hu31eTX_-oB9wmRYZVv0tsP8ZdlU",
    libraries: "places,geometry",
  },
});

ready(() => {
  for (const selector in components) {
    const elements = document.querySelectorAll(selector);

    Array.prototype.forEach.call(elements, el => {
      const thisComponentProps = el.dataset;

      // eslint-disable-next-line no-new
      new Vue({
        el,
        router,
        store,
        render: h =>
          h(components[selector], {
            props: {
              ...thisComponentProps,
            },
          }),
      });
    });
  }
});