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.

gleam · Accepted Answer · 2019-02-05 17:33:11Z

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;
  },
},
...

edited Feb 5, 2019 at 17:33

answered Feb 5, 2019 at 16:25

gleam

8706 silver badges12 bronze badges

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

9 Comments

dmikester1 Over a year ago

Do I need to keep the import line and the mixin line?

James Coyle Over a year ago

@gleam Why does this need to be computed? Does the definition change at some point?

gleam Over a year ago

@dmikester1 - mixins not needed.

gleam Over a year ago

@JamesCoyle - no, but computeds are lazy-inited and Vue not mutate them with observers: jsfiddle.net/27v8op4b (look at console output)

dmikester1 Over a year ago

Tried lightbox() { return lightbox; }, and getting same error as from the other answer: TypeError: _vm.lightbox.showBasketHelpLightbox is not a function

|

James Coyle · Accepted Answer · 2019-02-05 16:27:28Z

1

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.

answered Feb 5, 2019 at 16:27

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

4 Comments

Roy J Over a year ago

Or you could just reference it as an imported variable external to the component but in its scope, couldn't you?

James Coyle Over a year ago

@RoyJ I'm not sure what you mean. The import statement brings it into scope of the script tags. Including it in the data properties tells vue to make it available in the template.

gleam Over a year ago

@JamesCoyle - Vue's data() mutates its variables. It could break some externals: jsfiddle.net/27v8op4b (look at console output)

dmikester1 Over a year ago

I tried this and am getting the error: TypeError: _vm.lightbox.showBasketHelpLightbox is not a function

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related