So you want to use a jQuery plugin with Vue.js?

// Description

Vue.js is a helpful Javascript library that allows you to write tightly coupled templates with component based JS logic. Node.js is built in with easy ES6 support. Vue.js makes iteractive websites easier to build. jQuery is the reigning champion of the interactive web, with a reign of from about 2006–2012. This article demonstrates how the two work together.

// How will we demonstrate?

We’re gunna create a new Vue.js starter project and then pull in a jQuery plugin to make a website.

// Create a new project

Vue.js is that new new Javascript framework. It will never save you from bad code. jQuery plugins are abundant and do some handy things, though many of them are no longer maintained, so be careful here. One nice thing Vue has going for it is it uses a package.json file like a sane human being. Install the command line tools and generate a new Vue.js static website with some good ol’ Webpack a node_modules like the good ol’ days.

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

The rest is in this tutorial:

Vue component:

<date-range-picker @apply="onDateChange"></date-range-picker>

Vue.js javascript code:

mounted: function () {     
  this.$nextTick(() => {            
    window.$(this.$el).daterangepicker();     
  });
}

and

so

much

more

code

here

Learn How to Write a Vue JS Wrapper Component

#vue.js