How to install a Javascript library on VueJS

Question

I need to use the Sortable plugin from jQueryUI in my VueJS project, but I don't know how to include libraries on a VueJS 2 project.

This is what I have done so far:

1) Installed jQuery and jQueryUI this way

 npm install --save jquery-ui
 npm install --save jquery

2) I add these lines to main.js:

window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui'));

3) I use like this on my component:

<div class="height">
   <app-component-component></app-component-component>
</div>

....

export default {
    components: {
        appComponentComponent: ComponentComponent
    },
    ...
    mounted() {
        $('.height').sortable();  
    }       
}

But I get this error:

[Vue warn]: Error in mounted hook: "TypeError: $(...).sortable is not a function"

Can you please tell me what I am doing wrong in order to import and use the library?

Thanks in advance

Could you not simply import / extend jQuery in your component instead of globally? — Phil
– Phil, Commented Oct 30, 2017 at 22:57
@Phil can you please tell me how to do that? I tried to add the scripts to the component but it didn't work — Steve
– Steve, Commented Oct 30, 2017 at 23:01
Well, in the <script> section of your component, something like this ~ stackoverflow.com/questions/38417328/… — Phil
– Phil, Commented Oct 30, 2017 at 23:04
@Phil I added import $ from 'jquery'; import 'jquery-ui'; to the script section but I still have the same error :S — Steve
– Steve, Commented Oct 30, 2017 at 23:12

ankit patel · Accepted Answer · 2017-10-30 23:15:57Z

1

You can put your sortable plugin code in updated() method of vue lifecycle.

updated()
    {
        this.$nextTick(function () {
            jQuery('.height').sortable();
        })
    }

edited Oct 30, 2017 at 23:15

answered Oct 30, 2017 at 23:07

ankit patel

1,91813 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Steve Over a year ago

thanks, I replaced the mounted method by the updated you suggested but I still have the same error

ankit patel Over a year ago

did you check your source that you have jquery included or not ? and yeah one more thing instead of $('.height').sortable(); try jQuery('.height').sortable()

Steve Over a year ago

I think the libraries were added to the project because I do CTRL-U and then search jqueryui and I see that it was added

ankit patel Over a year ago

did you try jQuery instead of $ ? I updated my answer

Steve Over a year ago

yes I get the error [Vue warn]: Error in nextTick: "TypeError: jQuery(...).sortable is not a function"

|

Girl Codes · Accepted Answer · 2020-10-15 19:02:16Z

0

You have to add this in main.js

 global.jQuery = require('jquery');
 var $ = global.jQuery;
 window.$ = $;
 require('jquery-ui');
 require('jquery-ui/ui/widgets/sortable');

And you can use it inside mounted as you are.

answered Oct 15, 2020 at 19:02

Girl Codes

3884 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to install a Javascript library on VueJS

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related