How to use a jQuery plugin inside Vue

Question

I m building a web application inside VueJS but I encounter a problem  I want to use a jQuery extension  cropit to be specific  but I don t know how to instantiate require import it the right way without getting errors   I m using de official CLI tool and de webpack template for my App   I included jQuery like this in my main js file   import jQuery from  jQuery  window jQuery   jQuery   Now I m building an image editor component where I want to instantiate crept like this    export default     ready            document  ready function                 image-cropper-wrapper-element   cropit      options                        But I keep getting errors   Now my question is how to properly instantiate jQuery and plugins via NPM Webpack Vue   Thanks in advance

User · Answer

First install jquery  using npm   npm install jquery --save   I use   global jQuery   require  jquery    var     global jQuery  window

User · Answer

run npm install jquery --save then on your root component  place this global jQuery   require     node modules jquery dist jquery js    var     global jQuery   Do not forget to export it to enable you to use it with other components export default     name   App     components

User · Answer

You need to use either the globals loader or expose loader to ensure that webpack includes the jQuery lib in your source code output and so that it doesn t throw errors when your use   in your components      example with expose loader  npm i --save-dev expose-loader     somewhere  import  require  this jquery  but pipe it through the expose loader require  expose   expose jQuery jquery     If you prefer  you can import  require  it directly within your webpack config as a point of entry  so I understand  but I don t have an example of this to hand  Alternatively  you can use the globals loader like this   https   www npmjs com package globals-loader

User · Answer

Suppose you have Vue project created with vue-cli  e g  vue init webpack my-project   Go to project dir and run  npm install jquery --save    Open file build webpack base conf js and add plugins   module exports       plugins        new webpack ProvidePlugin             jquery         jquery   jquery          window jQuery    jquery         jQuery   jquery                       Also at top of file add   const webpack   require  webpack      If you are using ESLint  open  eslintrc js and add next globals     module exports       globals             true       jQuery   true              Now you are ready to go  Use   anywhere in your js   NOTE You don t need to include expose loader or any other stuff to use this   Originally from https   maketips net tip 223 how-to-include-jquery-into-vuejs

User · Answer

Step 1 We place ourselves with the terminal in the folder of our project and install JQuery through npm or yarn   npm install jquery --save   Step 2 Within our file where we want to use JQuery  for example app js  resources js app js   in the script section we include the following code      We import JQuery const     require  jquery       We declare it globally window            You can use it now    body   css  background-color    orange        Here you can add the code for different plugins

User · Answer

There s a much  much easier way  Do this   MyComponent vue   lt template gt    stuff here  lt  template gt   lt script gt    import   from  jquery     import  selectize        function              use jquery          body   css  background-color    orange              use selectize  s jquery plugin           myselect   selectize  options go here            lt  script gt    Make sure JQuery is installed first with npm install jquery  Do the same with your plugin

User · Answer

Option  1  Use ProvidePlugin  Add the ProvidePlugin to the plugins array in both build webpack dev conf js and build webpack prod conf js so that jQuery becomes globally available to all your modules   plugins                 new webpack ProvidePlugin           jquery       jquery   jquery        window jQuery    jquery       jQuery   jquery           Option  2  Use Expose Loader module for webpack  As  TremendusApps suggests in his answer  add the Expose Loader package   npm install expose-loader --save-dev   Use in your entry point main js like this   import  expose   expose jQuery jquery

User · Answer

import jquery within  lt script gt  tag in your vue file   I think this is the easiest way   For example    lt script gt  import   from  jquery    export default       name   welcome       mounted  function             window setTimeout function                     logo   css  opacity   0                 1000             lt  script gt

User · Answer

I use it like this   import jQuery from  jQuery   ready  function         var self   this      jQuery window  resize function            self  refs thisherechart drawChart

[jquery] How to use a jQuery plugin inside Vue

Examples related to jquery

Examples related to jquery-plugins

Examples related to webpack

Examples related to vue.js