Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kropcik's avatar

Can't use any of jQuery plugins in VueJS 2

Hi there,

Yesterday I've upgraded from VueJS v1 to VueJS v2 (2.1.10). The main problem is that, previously I could use jQuery inside of Vue. For example:

index.blade.php

    <script src="{{ url('/') }}/assets/js/jquery-1.10.2.min.js"></script>
    <script src="{{ url('/') }}/assets/js/jqueryui-1.9.2.min.js"></script>
    <script src="{{ url('/') }}/assets/js/datepicker/datepicker.min.js"></script>
    <script src="{{ url('/') }}/app.js"></script> // Generated app.js with webpack

Some component

    ready: function() {
        $('.some_class').datepicker(.....)
    }

And everything was working perfectly.

But now in VueJS 2:

Some component

mounted() {
    $('.some_class').datepicker(....)
}

bootstrap.js

...
window.$ = window.jQuery = require('jquery');
...

I cant use jQuery plugins and get Uncaught TypeError: $(...).datepicker is not a function ...

One way is to npm install some-jquery-plugin, then import it, but there is some issues too, with styles and etc. It is possible to use jquery like before ?

0 likes
9 replies
hendranucleo's avatar
Level 4

You have to require('datepicker') in .vue component.

I'll give you example here, i just download datepicker plugin from github & let me know if this one is you used there.

I used bootstrap.js, dashboard.js (cant be anything for you), and 'datepicker.min.js' where i put in resources/assets/js/ folder & stylesheet files dashboard.scss in resources/assets/sass/ folder.

bootstrap.js

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */
window.$ = window.jQuery = require('jquery');

dashboard.js

const Vue = require('vue')

Vue.component('example', require('./../components/Example.vue'))
new Vue({
    el: '#app'
});

Example.vue

<template>
    <div class="col mt-5">

        <div class="row" style="margin-top: 200px">
            <input id="date">
        </div>
    </div>
</template>

<script>
require('./../datepicker.min'); // depend on your folder structure;
    export default {
        mounted() {
            $('#date').datepicker()
        }
    }
</script>

dashboard.scss

@import "../datepicker.min.css"; // depend on your folder structure

Compile the asset with nm run dev or npm run prod. Then include the script with order app.js & then dashboard.js and of course the stylesheet.

And then voila, we gate datepicker on the page. Here is the screenshot

Hope this will work for you.

3 likes
kropcik's avatar

@hendranucleo You saved me twice this week :) Thank you. Now I get the way how implement jquery plugins to vuejs2 without using node modules.

hendranucleo's avatar

No worry man, if i know it was you i'll just put an answer same like fullcalendar :D

envision's avatar

How about using a package like Chatter that include it's own JS files to template?

First I had problems that jQuery wasn't defined globally, and now that it seems resolved, Chatter's jQuery doesn't do anything... Like clicking a button that have been bound with it doesn't do anything?

envision's avatar

This Mix config helped me...it is a bit different than other snippets that I've tried, that was posted as solutions to other problems:

mix.autoload({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' });

envision's avatar

@hendranucleo I came by that, but it didn't work at that time. Although I tried several combinations so I might have missed one that would have worked with "mix.autoload({});"

Why/how does it work if defined with just an empty object?

hendranucleo's avatar

@envision If you defined jquery in your bootstrap.js file as window.$ = window.jQuery = require('jquery') then you can leave it empty mix.autoload({}). I used this all the time, no multiple jquery included in every output *.js file.

Please or to participate in this conversation.