Using a third-party jquery library with vueJS and webpack

Question

I used bootstrap-toggle in Vuejs. When I started the project, I got the error "bootstrapToggle is not a function"

These are my components. VueJs looks like

<template>
  <input type='checkbox' id="toggle-checked" v-model="active">
</template>
<script type="text/babel">
  import $ from 'jquery'
  require('bootstrap-toggle')

  export default {
    data () {
      return {
        active: 1
      }
    },
    mounted: function () {
      $('#toggle-checked').bootstrapToggle()
    }
  }
</script>

Answer 1

One of the advantages of webpack is that you can make the module available in all of your files. In Vue.js, we talk about components. So what you did is that you use the jQuery module in your component and it will be available only in that component. To make it global, add webpack to your configuration file:

webpack.base.conf.js

var webpack = require("webpack")

module.exports = {
  plugins : [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery"
        })
  ],
};

webpack. jQuery , :

Vue

<template>
   <input type='checkbox' id="toggle-checked" v-model="active">
</template>
<script type="text/babel">

      require('bootstrap-toggle')

      export default {
        data () {
          return {
            active: 1
          }
        },
        mounted: function () {
          $('#toggle-checked').bootstrapToggle()
        }
      }
</script>

- , CSS, , Webpack . , Webpack .

Answer 2

require bootstrap-toggle index.html, .

<link href="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>