Can't use jquery plugin while using vueJs

434 Views Asked by At

I'm using jQuery tabSlideOut https://github.com/hawk-ip/jquery.tabSlideOut.js
it works fine but on the pages where I use vueJs components I get $(...).tabSlideOut is not a function.
I know that using jQuery within vueJs is not recommended and this is not the case so I didn't undestand why this doesn't work.

<script src="assets/js/jquery.tabSlideOut.js"></script>
<script src="assets/js/tabSlideOut.js"></script>

$(document).ready(function() {
var left = $('#left').tabSlideOut({
  tabLocation: 'left',
  clickScreenToClose: false,
  offset: '40px',
  offsetReverse: true, // offset from bottom, not top
  // handlers: enable and disable buttons when sliding open or closed
  onOpen: function(){
      $('#open').prop('disabled',true);
      $('#close').prop('disabled',false);
  },
  onClose: function(){
      $('#open').prop('disabled',false);
      $('#close').prop('disabled',true);
  }      
});
$('#top').tabSlideOut({
  tabLocation: 'right',
  action: 'hover',
  handleOffsetReverse: true,
  offsetReverse: true,
  onLoadSlideOut: true
});
});

<script src="js/app.js" charset="utf-8"></script>

Edit: Solved by including the jQuery plugin after the Vue is created, that by adding this in the created method of the Vue.

    created(){
        //...
        require('./jquery.tabSlideOut');
    }
0

There are 0 best solutions below