[Vuejs]-Import jquery plugin in Vue component

by

1👍

✅

Maybe you can consider a directive for that.

First load jquery and nested.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.nested/1.01/jquery.nested.min.js"></script>

Then create a new directive.

Vue.directive('nested', function(el, binding) {
  $(el).nested(binding.value)
})

Example usage:

<div v-nested="nestedJsOptions">
  ...
</div>

In your component:

data: {
  return {
    nestedJsOptions: {
      minWidth: 100,
      gutter: 10,
      // ..
    }
  }
}
👤Ikbel

2👍

You can import in script the plugin and use it in your functions, I will give you an example of datepicker which is a jquery based plugin.

<template>
  <div class="input-group date">
    <input type="text" class="form-control datepicker" :name="name" :value="value" @keyup.enter="validate" @blur="validate">
  </div>
</template>

<script>
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
import Moment from 'moment'

export default {
  props: {
    value: String,
    name: String,
    orientation: {
      type: String,
      default: "top"
    }
  },
  data() {
    return {}
  },
  mounted() {
    var vm = this;
    $(this.$el).find(".datepicker").datepicker({
      language: this.$store.state.currentLanguage,
      format: "dd/mm/yyyy",
      autoclose: true,
      orientation: vm.orientation
    }).on("show", () => { do what ever you want }
}
</script>

Hope this will help.

👤V. Sambor

Leave a comment