Using jQuery plugin in Vue.js single file component

Question

I am trying to use this jQuery plugin in my Vue.js single file component.

as required in the linked autocomplete plugin I imported references in index.html, for them to be available all other vue components where I need to use autocomplete feature in input field .

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

But when I include below code in the script tag of my single file component.

 $("#autocomplete").autocomplete({
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    });

I get error console saying:

> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete({
>     source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] })', '$("#autocomplete").autocomplete' is undefined)

But I have included the dependencies in index.html

bennyxguo · Accepted Answer · 2018-12-29 05:54:17Z

0

Solution: use a component as a wrapper

Check out the tutorial here: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

answered Dec 29, 2018 at 5:54

bennyxguo

8456 silver badges15 bronze badges

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

3 Comments

Ciasto piekarz Over a year ago

;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation

bennyxguo Over a year ago

Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js

Ciasto piekarz Over a year ago

I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list

blaz · Accepted Answer · 2018-12-29 07:46:26Z

0

Check the order of js files/script inside your html. It's possible that the Vue script is executed before jQuery is loaded. Move jQuery-related script tags above Vue script tags. You can also safely check if jQuery is available in your Vue script by checking for existence of window.$:

if (typeof window.$ === 'function') {
  $("#autocomplete").autocomplete({
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    });
}

answered Dec 29, 2018 at 7:46

blaz

4,07825 silver badges38 bronze badges

6 Comments

Ciasto piekarz Over a year ago

well if it was the case of jQuery not loading up then I might have go terror at $("#autocomplete") but I am getting error .autocomplete

blaz Over a year ago

@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.

Ciasto piekarz Over a year ago

thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase

Ciasto piekarz Over a year ago

I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.

blaz Over a year ago

@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js, autocomplete is not defined while in my demo it is there.

|

webmint · Accepted Answer · 2018-12-29 21:51:36Z

-1

I would suggest u not to use Jquery in Vue. Its bad practice. There is a number of vue plugins u can use and even create your own (which is best option IMHO)

https://www.npmjs.com/package/vue2-autocomplete-js https://github.com/paliari/v-autocomplete https://vuejsexamples.com/tag/autocomplete/ https://alligator.io/vuejs/vue-autocomplete-component/

answered Dec 29, 2018 at 21:51

webmint

2191 silver badge4 bronze badges

1 Comment

Ciasto piekarz Over a year ago

I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery

Collectives™ on Stack Overflow

Using jQuery plugin in Vue.js single file component

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related