Vue.js - how to access external Javascript/Jquery functions

Question

I am working on creating a lightbox/modal component in Vue.js. I've got it mostly working and now I want to use some existing functions from another file that are written in Javascript/Jquery. It's too big a task to rewrite these in Vue at this point, so we just need to use them as is for now. But I'm hung up on how to get access to them. I'm not sure if I need to import it like a mixin or something different.

As the code is now, I am getting the error: [Vue warn]: Property or method "lightbox" is not defined on the instance but referenced during render.

Here is the relevant code from my Vue component:

<template>
  ...
  <i
    class="fa fa-info-circle"
    name="moreInfo"
    aria-hidden="true"
    @click="lightbox.showBasketHelpLightbox('servicePlan', true, 3)"
  />
  ...
</template>
<script>
  ...
  import lightbox from '../../../legacy/static/js/lightbox';

  export default {
  name: "AddToCartModal",
  components: {.....},
  mixins: [....., lightbox],
  ....
}
</script>

And the relevant code from lightbox.js

const accessories = [];
let selectedServicePlanSku = selectedServicePlanSku || undefined;

var APPLICATION_STATE = APPLICATION_STATE || (function () {
  try {
    return JSON.parse(__VUEX_STATE__);
  } catch (e) { }
  return {uri: {}, machine: {}};
})();

var staticURL = staticURL || APPLICATION_STATE.uri.application;
var staticMediaURL = staticMediaURL || APPLICATION_STATE.uri.static;
var INTERNAL = INTERNAL || APPLICATION_STATE.machine.internal ? "true" : "false";
var KIOSK = KIOSK || APPLICATION_STATE.machine.kiosk ? "true" : "false";
// whole bunch of other functions
function showBasketHelpLightbox(content, returnToCartLightbox, additionalParam, returnToWishlistLightbox){
  let helpTextCategoryId;
  if (content === "rebates") {
    helpTextCategoryId = 13170;
  } else if (content === "projects") {
    helpTextCategoryId = 1508847718230;
  } else if (content === "servicePlan") {
    if(additionalParam === 3){
      helpTextCategoryId = 12811;
    } else if (additionalParam === 4){
      helpTextCategoryId = 12812;
    } else if (additionalParam === 6){
      helpTextCategoryId = 12813;
    } else if (additionalParam === 8){
      helpTextCategoryId = 12927;
    } else if (additionalParam === 10 || additionalParam === 12 || additionalParam === 14
      || additionalParam === 18 || additionalParam === 20 || additionalParam === 22){
      helpTextCategoryId = 12814;
    } else if (additionalParam === 16){
      helpTextCategoryId = 12815;
    } else if(additionalParam === 24){
      helpTextCategoryId = 1483373312360;
    } else if(additionalParam === 26) {
      helpTextCategoryId = 1483373312361;
    }
  }

  closeBasketLightboxPopUp();

  $(document).ready(function(){
    $("div#basketHelpLightbox-panel").show(function(){
      $("#basketHelpLightbox-panel").fadeIn(300);
    });
    $("div#basketHelpLightbox").fadeTo(300, .6);
    $("div#skipTab").click(function(){
      $("#basketHelpLightbox, #basketHelpLightbox-panel").fadeOut(300);
    });
  });
  jQuery("div#basketHelpLightboxPopUp").empty();
  jQuery("div#basketHelpLightboxPopUp").show();

  if(content === "learnMore"){

    let lightboxmsg = '<div id="basketHelpLightboxPopUp"" class="" style="display: block;">';
    lightboxmsg += '<div id="popupMainDiv">';
    lightboxmsg += '<div id="flexibleLightboxPopUp"> <center> <span id="descriptiveTitle"> text </span> <span id="skipTabitemTempDisclaimFlexLightbox" onclick="closeBasketHelpLightbox(' + returnToCartLightbox + ', ' + returnToWishlistLightbox + ')" class="btn_SF btnClose gradient rightFloat" tabindex="0" onkeypress="checkClickOnEnterEvent(event, this);"><strong>X</strong></span> </center></div>';
    lightboxmsg += '    <div id="bodyOfPopup" style="padding:5px;z-index:5501;"><div style="padding:10px;">more text</div></div></div></div>';

    jQuery('#basketHelpLightboxPopUp').replaceWith(lightboxmsg);
  } else{
    let text = '<div id="basketHelpLightboxheaderPopUp">';
    text += '<span id="descriptiveTitle">Additional Information</span>';
    text += '<a href="javascript:void(0)" onclick="closeBasketHelpLightbox(' + returnToCartLightbox + ', ' + returnToWishlistLightbox + ');return false;" class="btn_SF btnClose gradient rightFloat"><strong>X</strong></a>';
    text += '</div>';
    text += "<iframe scrolling='auto' id='basketHelpLightboxIframe' src='content.html?cid=" + helpTextCategoryId + "'></iframe>";
    jQuery('#basketHelpLightboxPopUp').append(text);
    jQuery('#basketHelpLightboxPopUp .btnClose').focus();

    $(document).ready(function(){
      $("div#basketHelpLightbox-panel").show(function(){
        $("#basketHelpLightbox-panel").fadeIn(300);
        $("div#basketHelpLightbox").fadeTo(300, .6);
      });
      $("div#basketHelpLightbox").fadeTo(300, .6);
      $("div#skipTab").click(function(){
        $("#basketHelpLightbox, #basketHelpLightbox-panel").fadeOut(300);
      });
    });
    jQuery("div#basketHelpLightboxPopUp").show();
  }
}

function closeBasketHelpLightbox(returnToCartLightbox, returnToWishlistLightbox){
  jQuery("div#basketHelpLightboxPopUp").hide();
  $("#basketHelpLightbox, #basketHelpLightbox-panel").fadeOut(300);
  if(returnToCartLightbox){
    showCartLightbox();
  } else if (returnToWishlistLightbox) {
    showWishlistLightbox();
  }
}
// lots more functions

I did try adding export default {showBasketHelpLightbox, closeBasketHelpLightbox} to the bottom of lightbox.js and then just importing those function names as mixins in the Vue component. But it complained about the default word in that file.

Answer 1

You can access to lightbox by computed-prop: https://jsfiddle.net/L3fjdwuh/

// lodash.js example
new Vue({
  el: '#app',
  data: {
    arr: [1,2,3,4],
  },
  computed: {
    LODASH() {
        return _;
    },
  },
});

---

UPD (by comments):

// in your legacy/static/js/lightbox
export default {
  showBasketHelpLightbox,
};


// in your component
import { default as lightbox } from '...';

...
computed: {
  lightbox() {
    return lightbox;
  },
},
...

Answer 2

You should be able to just add it to the data properties:

import lightbox from '../../../legacy/static/js/lightbox';

export default {
  name: "AddToCartModal",
  components: {.....},
  data: () => ({
    lightbox,
  }),
}

You shouldn't include it in mixins unless it is an actual vue mixin. Adding it to the data props should allow you to reference it within the template.