[Vuejs]-Require other library (jquery or etc.) in vue.js

1πŸ‘

I think might need to declare jQuery globally as well, like so:

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
});

or:

window.$ = window.jQuery = require('jquery');
πŸ‘€craig_h

0πŸ‘

1.import $ in RegisterModal.vue

<script>
  import $ from 'jQuery';
</script>

2. add externals configuration to webpack.config.js

externals: {
      jQuery: 'window.jQuery'
 }
πŸ‘€wuxiandiejia

-1πŸ‘

Whilst facing the same issue I came across this useful article which suggests that

The cleanest and most robust way to use a Javascript library in a Vue
project is to proxy it to a property of the Vue prototype object.
Let’s do that to add the Moment date and time library to our project:
(entry.js)

import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

He explains that

Since all components inherit their methods from the Vue prototype
object this will make Moment automatically available across any and
all components with no global variables or anything to manually
import. It can simply be accessed in any instance/component from
this.$moment

After some fiddling I got it working nicely for me, e.g. using props in a child component

<p v-if="enrolment.eventBookings.length > 0">{{$moment(enrolment.eventBookings[0].bookable.startTime).format("HH:mm")}}</p>

So kudos to the author!

πŸ‘€Mikustykus

Leave a comment