How to use jquery plugin in vuejs2

Question

I am faced with difficulty when setting settings for the component that uses jquery in vuejs2.

<div id="app">
        <date-picker @update-date="updateDate" timepicker= "false" v-once></date-picker>
        <p>{{ date }}</p>
 </div>

<script>

Vue.component('date-picker', {
    template: '<input/>',
    props: [ 'timepicker' ],
    mounted: function() {
    var self = this;
    $(this.$el).datetimepicker({
      timepicker: this.timepicker,

      onSelect: function(date) {
        self.$emit('update-date', date);
      }
    });
    },
    beforeDestroy: function() {
      $(this.$el).datetimepicker('hide').datetimepicker('destroy');
    }
  });

  new Vue({
    el: '#app',
    data: {
      date: null
    },
    methods: {
      updateDate: function(date) {
        this.date = date;
      }
    }
  });

Answer 1

Option #1: Use Provideplugin

Add the Provideplugin in the plugin array in the files build/webpack.dev.conf.js and build/webpack.prod.conf.js, so jQuery becomes global for all its modules:

plugins: [

  // ...

  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

Option #2: Use Expose Loader module for webpack

Add the package Expose Loader:

npm install expose-loader --save-dev

Use in your entry point main.js as follows:

import 'expose?$!expose?jQuery!jquery'

// ...